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文件当中进行记录