1.vue-cli和vue的关系
类比：Vue CLI = Vue + 一堆的js插件；Spring Cloud = Spring Boot + 一堆第三方组件。
1.1 各自用途
- Vue CLI是一个脚手架，通俗点说就是代码生成器，可以快速生成一套基于Vue完整的前端框架，单独编译，单独部署。可以再集成各种第三方插件，扩展出更多的功能。
- Vue是渐近式框架，你可以用它一个功能，也可以用全家桶。比如你可以在老的jsp或thymeleaf项目里，引入vue.js，只用它核心的数据绑定功能。
1.2 Vue和Vue-cli版本号对应关系
Vue CLI 4.5以下，对应的是Vue2
Vue CLI 4.5及以上，对应的是Vue3，当然，创建项目的时候可以选择Vue2
2. vue-cli2和vue-cli3+版本
2.1 两者的区别
（1）详细的区别：
- Webpack版本不同：3.0是基于Webpack4，2.0是基于Webpack3
- 目录结构：
3.0的设计原则是“0配置”，相比2.0没有了config和build等目录。没有了项目配置文件。需要自己手动创建vue.config.js去配置。 - 静态资源存放位置： 2.0的静态资源放在static目录下。且是在项目创建时会自动生成，而3.0则是放在public目录下，若没有自动生成，也可手动创建
- node_modules首次下载方式： 3.0在
创建项目时就将所有的依赖包node_modules下载完成,而2.0则是需手动npm install下载依赖 - 启动方式： 2.0是
npm run dev,3.0默认是npm run serve.当然启动命令也可在package.json文件中修改。（如下分别是2.0和3.0的package.json文件）
image.png
image.png - vue-cli 3.0还提供了图形化界面，我们可以在不适用命令的情况下去开发我们的项目：
vue ui //开启图形化界面
（2）它们各自的优点：
- cli2个性化强一些，可以更友好的配置webpack。
- cli3通用性强一些，达到真正的开箱即用，几乎零配置，已经将最适合开发的配置打包封装。
2.2 使用选择
- 如果是个人的项目,对webpack不是那么了解，建议用vue-cli3
- 公司的项目建议你用vue-cli2。
原因是，公司的项目也需要满足特定的业务场景，有特殊的业务需求，vue-cli3封装的太死了，手动配置不够灵活。但是对于对webpack不那么熟悉的，vue-cli3能满足你大部分需求。
3.使用vue-cli搭建vue项目
Vue CLI 的包名称由 vue-cli(旧版本1和2) 改成了 @vue/cli，安装和删除等命令新旧版本会不一样。
3.1 安装node
node是一切基础，必须安装。安装前先检查是否已经安装,检查版本是否符合vue-cli要求,Node 版本要求
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
3.2 vue-cli安装
（1）vue-cli的版本查看
vue -V
或
vue --version
如果版本太低，可以先卸载，再安装。
（2）卸载已经安装的Vue Cli
卸载 3.x 或 4.x 版本的Vue Cli
npm uninstall -g @vue/cli
# OR
yarn global remove @vue/cli
卸载 1.x 或 2.x 版本的Vue Cli
npm uninstall vue-cli -g
# OR
yarn global remove vue-cli
在执行完上述命令后，在终端输入 vue 命令，提示 'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件，则表明卸载成功。
如果发现无法卸载的问题，卸载时提示up to date in，原因是node js 安装时是默认目录 C:\Users\T\AppData\Roaming\npm
cdm 把路径切换到 当前安装目录。就可以卸载了
（3）安装指定版本的Vue Cli
- 查看 Vue Cli 的所有版本号
3.x 和 4.x 的所有版本号
npm view @vue/cli versions --json
1.x 和 2.x 的所有版本号
npm view vue-cli versions --json
- 安装指定版本号的Vue Cli
安装 3.x 和 4.x 版本
npm install -g @vue/cli@版本号
# OR
yarn global add @vue/cli@版本号
如果不指定版本号，就是3.0+最新版本
安装 1.x 和 2.x 版本
npm install -g vue-cli@版本号
# OR
yarn global add vue-cli@版本号
如果不指定版本号，就是2.0最高版本
- 升级版本
npm update -g @vue/cli
3.安装后目录结构说明
不同的版本目录结构不一样，主要是两种：vue-cli的3.0+和3.0之下，下面的结构是3.0之下生成的
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- utils.js // 构建工具相关
| |-- vue-loader.conf.js // webpack loader配置
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置,构建开发本地服务器
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- router // vue的路由管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- .postcsssrc // postcss配置文件
|-- README.md // 项目说明
|-- index.html // 入口页面
|-- package.json // 项目基本信息,包依赖信息等
vue-cli 3.0以上的目录结构
|-- src // 源码目录
| |-- components // vue公共组件
| |-- router // vue的路由管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- public // 静态文件，比如一些图片，json数据等
| |-- favicon.ico // 图标文件
| |-- index.html // 入口页面
|-- vue.config.js // 是一个可选的配置文件，包含了大部分的vue项目配置
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- .postcsssrc // postcss配置文件
|-- README.md // 项目说明
|-- package.json // 项目基本信息,包依赖信息等
4.vue-cli的webpack配置分析
参考：https://segmentfault.com/a/1190000008644830
4.1 开发和生产环境的入口
从package.json可以看到开发和生产环境的入口
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
"build": "gulp"
}
dev中的设置，build/webpack.dev.conf.js，该文件是开发环境中webpack的配置入口。
4.启动、打包项目
一：启动项目
npm run dev
二：打包项目
npm run build
项目上线时，只需要将 dist 文件夹放到服务器就行了。
