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 版本。

image.png

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 把路径切换到 当前安装目录。就可以卸载了

image.png

（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 文件夹放到服务器就行了。