Mac如何搭建Vue项目

目录

一、安装node 

二、安装NPM

1、本地安装和全局安装

2、通过Node.js官方安装程序安装

3、通过Homebrew安装

三、NPM常用命令

1、查看模块的版本号

2、安装指定版本

3、卸载模块

4、更新模块

5、查看模块信息

6、查看模块地址

7、更新命令

8、卸载NPM

四、安装Vue

五、初始化脚手架CLI

六、创建vue项目

七、项目一些配置

1、项目文件目录

2、项目运行起来,浏览器自动打开

3、eslint校验工具的关闭:

4、安装less 、less-loader

5、安装vue-router

一、安装node 

NPM是一个极为重要的Node.js软件包管理器,它允许用户轻松安装、更新、卸载任何需要的Node.js软件包。

Node.js:NPM是随Node.js一起发布的,如果没有安装Node.js,可以在Node.js官网下载。

方式一:下载安装包pkg(推荐)

安装完成后,可以运行以下命令检查是否成功安装了这些软件:

$ node -v

方式二:brew 容易失败(可能需要科学上网会快些)

Homebrew:它是一个Mac OS X下的包管理器,可以在Homebrew官网上找到详细的安装说明。

brew install node

如果顺利地输出了版本信息,则表明这些软件已经成功安装。

二、安装NPM

1、本地安装和全局安装

npm 的包安装分为本地安装(local),全局安装(global)两种,从命令行来看,差别只是有没有-g而已,比如

npm install <模块名>            # 本地安装
npm install <模块名>     -g      # 全局安装
// install可以缩写为i

本地安装
将安装包放在 ./node_modules 下(运行 npm 命令时所在的目录)如果没有 node_modules 目录,会在当前执行npm 命令的目录下生成node_modules 目录
可以通过 require() 来引入本地安装的包


全局安装
将安装包放在 /usr/local 下或者你 node 的安装目录
可以直接在命令行里使用

2、通过Node.js官方安装程序安装

方式一:

可以在Node.js官网下载Mac的.pkg文件,并按照提示安装。安装完成后,NPM已经随Node.js一起安装了。

3、通过Homebrew安装

可以使用以下命令在终端中安装NPM:

brew install node

三、NPM常用命令

1、查看模块的版本号

npm <模块名> grunt

2、安装指定版本

npm install 默认安装最新版本,如果想要安装指定版本,可以在库名称后加 @版本号

npm install <模块名>@latest
npm install <模块名>@0.1.1
npm install <模块名>@">=0.1.0 <0.2.0"

3、卸载模块

我们可以使用以下命令来卸载 Node.js 模块

npm uninstall <模块名>

 建议直接删除node-modules文件夹

4、更新模块

npm update <模块名>    

5、查看模块信息

npm  list  <模块名>    

6、查看模块地址

npm view <模块名> repository.url

很多包的地址都是托管在github上

7、更新命令

为了获得最新的软件包并修复可能存在的错误和漏洞,需要定期更新npm。以下是更新npm的三种方法:

1、通过npm自身更新
可以使用以下命令更新npm:

npm install npm -g


2、通过Homebrew更新
可以使用以下命令更新npm:

brew update
brew upgrade node

8、卸载NPM

$ brew uninstall node
$ npm uninstall npm -g
$ sudo rm -rf /usr/local/{lib/node{,/.npm,_modules},bin,share/man}/{npm*,node*,man1/node*}

四、安装Vue

在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

npm install vue@^3

五、初始化脚手架CLI

Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了开箱即用的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅 Vue CLI

npm install -g @vue/cli

六、创建vue项目

vue create my-project

七、项目一些配置

1、项目文件目录

public:放置一些静态资源(图片),需要注意放在public文件中的静态资源,webpack进行打包时会原封不动的打包到dist文件夹中

src(源代码文件夹):

assets:一般放置静态资源(一般放置多个组件公用的静态资源)需要注意放置在assets文件夹的静态资源在webpack打包时,会把静态资源当做一个模块打包在js文件里面

components: 一般放置的是非路由组件(全局组件)

App.vue: 唯一的根组件

main.js: 程序入口文件,也是整个程序当中最先执行的文件

babel.config.js:配置文件(babel相关)

package.json:依赖关系

2、项目运行起来,浏览器自动打开

package.json文件

"scripts": {"serve": "vue-cli-service serve --open","build": "vue-cli-service build","lint": "vue-cli-service lint"},
3、eslint校验工具的关闭:

vue.config.js文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,//运行后是否自动在浏览器打开lintOnSave: true,//关闭eslint校验
})
4、安装less 、less-loader

jsconfig.json文件

src文件夹简写方法,配置别名

配置别名@提示【@代表的是src文件夹,这样将来文件过多,找的时候方便】

{

"compilerOptions": {

"target": "es5",

"module": "esnext",

"baseUrl": "./",

"moduleResolution": "node",

"paths": {

"@/*": [

"src/*"

]

}

},

"exclude": ["node_modules", "dist"]

}

5、安装vue-router

npm install --save vue-router

--save:可以让你安装的依赖,在package.json文件当中进行记录 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/156289.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计模式 - 概览

一、概念 分为三大类、23中具体设计模式。 类型原理具体模式创建型封装了具体类的信息&#xff0c;隐藏了类的实例化过程。 单例模式&#xff08;Singleton&#xff09; 工厂方法模式&#xff08;Factory Method&#xff09; 抽象工厂模式&#xff08;Abstract Factory&#xf…

观光奶牛 (01分数规划、负环)

01分数规划问题&#xff1a;类似于观光奶牛这个题中的&#xff0c;求的路径上的点权值和与边权值和的商最大最小。 当前问题的推到如下&#xff1a; 该问题其实可以用二分图来解决&#xff0c; 在不断的二分答案中获取符合条件的最大值。然后问题就转化为如何是否存在和为mid的…

Vue3中的pinia使用,入门教程

文章目录 文章目录 pinia组成部分 pinia使用流程 注意Store获取到后不能解构&#xff0c;否则失去响应式 一、pinia原理&#xff1f; 功能&#xff1a;管理全局共享数据&#xff0c;pinia与vuex功能一样优势&#xff1a;pinia相对于vuex增加了对ts的支持&#xff0c;对响应式的…

程序员如何“升级打怪”?我用了这几个“歪瓜”!

不会吧&#xff1f;不会吧&#xff1f;计算机本命专业出身、以及半路出家的&#xff0c;混了几年了&#xff0c;还在新手村&#xff1f;对得起这几年摸的鱼&#xff1f; 思考一下&#xff1a;如何从小白一跃为大师&#xff0c;从此走上人生巅峰、迎娶白富美&#xff1f;变强只…

Java --- JVM之垃圾回收相关知识概念

目录 一、System.gc() 二、内存溢出与内存泄漏 2.1、内存溢出 2.2、内存泄漏 三、Stop the world 四、垃圾回收的并行与并发 4.1、并发 4.2、并行 4.3、并行 vs 并发 4.4、垃圾回收的并发与并行 五、安全点与安全区域 5.1、安全点 5.2、安全区域 六、引用 6.1…

3.基于多能互补的热电联供微网优化运行复现(matlab代码)

0.代码链接 基于多能互补的热电联供微电网/综合能源系统优化运行&#xff08;Matlab程序Yalmip&#xff0b;Cplex求解&#xff09;_工业综合能源系统资源-CSDN文库 2. 主要内容&#xff1a;代码主要做的是多能互补的热电联供型微网优化运行模型&#xff0c;在需求侧对负荷类型…

hive数据库将非分区表数据迁移到分区表

文章目录 一、非分区表数据迁移到分区表 一、非分区表数据迁移到分区表 业务运行一段时间后非分区表的数据量非常大&#xff0c;需要创建一张分区表并将数据迁移到分区表中。 原表建表语句&#xff1a; create table user(id String default null comment 主键id,name St…

c# 文件操作

文件操作 namespace demo1;class proj {/// <summary>///文件&#xff1a;///注册表是Micrsoft windows 中的一个重要的数据库&#xff0c;用于存储系统和应用恒旭的设置信息///主要了解文件和注册表的创建、打开、读取、写入、修改、删除/// </summary>//////文件…

Android Studio 引入Xui框架-简单应用

Android Studio Flamingo | 2022.2.1 Patch 2 Android 11开发、Gradle Version 8.0、 jdk17 源代码&#xff1a;GitHub - xuexiangjys/XUI: &#x1f48d;A simple and elegant Android native UI framework, free your hands! (一个简洁而优雅的Android原生UI框架&#xff…

【Chrony】一个多功能的NTP实现

在现代的计算机系统中&#xff0c;准确的时间同步对于许多关键应用和系统的正常运行至关重要。Linux操作系统提供了多种时间同步工具&#xff0c;其中Chrony是一款备受推崇的工具&#xff0c;为Linux系统提供了更准确、更稳定的时间同步功能。本文将介绍Chrony的工作原理、优点…

亚信面试题

文章目录 2.Java基本数据类型?3.对象三大特征?4.多态和封装的含义及作用?5.方法重写和方法重载的区别?6.String/StringBuffer和StringBuilder区别?7.String常用方法有哪些?8.==和equals有什么区别?9.两个对象hashCode相同equals为true吗?10.ArrayList和LinkedList有什么…

WordPress网站迁移实战经验

前几日,网站服务器到期,换了服务商,就把我的WordPress的网站迁移到本地电脑了。方便以后文章迁移。 本次迁移网站主要经历以下几个步骤。 1.域名转出。 2.备份数据库及网站文件下载。 3.重新搭建WordPress网站。 4.网站文件及数据库导入。 下面详细介绍下每个步骤的操作…

Linux 安全 - 扩展属性xattr

文章目录 前言一、简介二、扩展属性命名空间2.1 简介2.2 security扩展属性2.3 System扩展属性2.4 Trusted扩展属性2.5 User扩展属性 三、用户空间使用3.1 setfattr/getfattr3.2 setxattr/getxattr/listxattr 参考资料 前言 一、简介 xattr - Extended attributes扩展属性是与…

【狂神说Java】redis

✅作者简介&#xff1a;CSDN内容合伙人、信息安全专业在校大学生&#x1f3c6; &#x1f525;系列专栏 &#xff1a;【狂神说Java】 &#x1f4c3;新人博主 &#xff1a;欢迎点赞收藏关注&#xff0c;会回访&#xff01; &#x1f4ac;舞台再大&#xff0c;你不上台&#xff0c…

【done】剑指 Offer 53 - II:0~n-1中缺失的数字

力扣&#xff0c;https://leetcode.cn/problems/que-shi-de-shu-zi-lcof/description/ solution1 线性扫描&#xff0c;一般情况 class Solution {public int takeAttendance(int[] records) {boolean[] visited new boolean[records.length 1];Arrays.fill(visited, fals…

解压过大文件(超过4GB)传输至服务器的问题

不能在终端执行unzip指令了。 1、通过终端 7za x 文件名.zip 2、通过jupyter notebook代码来解决 import zipfilef zipfile.ZipFile("dataset.zip",r) # 压缩文件在jupyter中的位置 for file in f.namelist():f.extract(file,"./dataset") …

docker部署gitlab 12.10.6过程

docker部署gitlab 12.10.6过程 1.docker安装 docker指定版本安装【官方文档步骤】 官方文档地址&#xff1a;https://docs.docker.com/engine/install/centos/ # 1.安装yum工具及设置docker-ce镜像库 sudo yum install -y yum-utils# 国外的镜像下载太慢了改成阿里云镜像库 s…

pipeline传参给job

场景&#xff1a;pipeline实现自动部署&#xff0c;job实现自动测试&#xff0c;但是只有部署dddd环境时&#xff0c;才调自动测试的job&#xff0c;所以需要在调自动测试job时&#xff0c;把参数传给测试job 上一个任务会显示下一步调谁 ------------------------------------…

解决:ERR This instance has cluster support disabled

问题描述 在使用Redisson做分布式锁&#xff0c;连接redis时&#xff0c;提示以下错误&#xff1a; 问题定位 通过指令&#xff1a; cluster nodes查看&#xff0c;发现 出现这种提示的原因&#xff0c;是因为此Redis实例已经禁用了集群(默认状态下是禁用状态)。 解决 …

Flowable工作流高级篇

文章目录 一、任务分配和流程变量1.任务分配1.1 固定分配1.2 表达式分配1.2.1 值表达式1.2.2 方法表达式 1.3 监听器分配 2.流程变量2.1 全局变量2.2 局部变量2.3 案例讲解 二、候选人和候选人组1.候选人1.1 定义流程图1.2 部署和启动流程实例1.3 任务的查询1.4 任务的拾取1.5 …