1.vue-cli和vue的關(guān)系

類(lèi)比：Vue CLI = Vue + 一堆的js插件；Spring Cloud = Spring Boot + 一堆第三方組件。

1.1 各自用途

• Vue CLI是一個(gè)腳手架，通俗點(diǎn)說(shuō)就是代碼生成器，可以快速生成一套基于Vue完整的前端框架，單獨(dú)編譯，單獨(dú)部署。可以再集成各種第三方插件，擴(kuò)展出更多的功能。
• Vue是漸近式框架，你可以用它一個(gè)功能，也可以用全家桶。比如你可以在老的jsp或thymeleaf項(xiàng)目里，引入vue.js，只用它核心的數(shù)據(jù)綁定功能。

1.2 Vue和Vue-cli版本號(hào)對(duì)應(yīng)關(guān)系

Vue CLI 4.5以下，對(duì)應(yīng)的是Vue2
Vue CLI 4.5及以上，對(duì)應(yīng)的是Vue3，當(dāng)然，創(chuàng)建項(xiàng)目的時(shí)候可以選擇Vue2

2. vue-cli2和vue-cli3+版本

2.1 兩者的區(qū)別

（1）詳細(xì)的區(qū)別：

• Webpack版本不同：3.0是基于Webpack4，2.0是基于Webpack3
• 目錄結(jié)構(gòu)： 3.0的設(shè)計(jì)原則是“0配置”，相比2.0沒(méi)有了config和build等目錄。沒(méi)有了項(xiàng)目配置文件。需要自己手動(dòng)創(chuàng)建vue.config.js去配置。
• 靜態(tài)資源存放位置： 2.0的靜態(tài)資源放在static目錄下。且是在項(xiàng)目創(chuàng)建時(shí)會(huì)自動(dòng)生成，而3.0則是放在public目錄下，若沒(méi)有自動(dòng)生成，也可手動(dòng)創(chuàng)建
• node_modules首次下載方式： 3.0在創(chuàng)建項(xiàng)目時(shí)就將所有的依賴(lài)包node_modules下載完成,而2.0則是需手動(dòng)npm install下載依賴(lài)
• 啟動(dòng)方式： 2.0是npm run dev,3.0默認(rèn)是npm run serve.當(dāng)然啟動(dòng)命令也可在package.json文件中修改。（如下分別是2.0和3.0的package.json文件）
  
  image.png
  
  
  image.png
• vue-cli 3.0還提供了圖形化界面，我們可以在不適用命令的情況下去開(kāi)發(fā)我們的項(xiàng)目：

 vue ui    //開(kāi)啟圖形化界面

（2）它們各自的優(yōu)點(diǎn)：

• cli2個(gè)性化強(qiáng)一些，可以更友好的配置webpack。
• cli3通用性強(qiáng)一些，達(dá)到真正的開(kāi)箱即用，幾乎零配置，已經(jīng)將最適合開(kāi)發(fā)的配置打包封裝。

2.2 使用選擇

• 如果是個(gè)人的項(xiàng)目,對(duì)webpack不是那么了解，建議用vue-cli3
• 公司的項(xiàng)目建議你用vue-cli2。

原因是，公司的項(xiàng)目也需要滿足特定的業(yè)務(wù)場(chǎng)景，有特殊的業(yè)務(wù)需求，vue-cli3封裝的太死了，手動(dòng)配置不夠靈活。但是對(duì)于對(duì)webpack不那么熟悉的，vue-cli3能滿足你大部分需求。

3.使用vue-cli搭建vue項(xiàng)目

Vue CLI 的包名稱(chēng)由 vue-cli(舊版本1和2) 改成了 @vue/cli，安裝和刪除等命令新舊版本會(huì)不一樣。

3.1 安裝node

node是一切基礎(chǔ)，必須安裝。安裝前先檢查是否已經(jīng)安裝,檢查版本是否符合vue-cli要求,Node 版本要求
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推薦 v10 以上)。可以使用 n，nvm 或 nvm-windows 在同一臺(tái)電腦中管理多個(gè) Node 版本。

image.png

3.2 vue-cli安裝

（1）vue-cli的版本查看

vue -V
或
vue --version

如果版本太低，可以先卸載，再安裝。
（2）卸載已經(jīng)安裝的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

在執(zhí)行完上述命令后，在終端輸入 vue 命令，提示 'vue' 不是內(nèi)部或外部命令，也不是可運(yùn)行的程序或批處理文件，則表明卸載成功。
如果發(fā)現(xiàn)無(wú)法卸載的問(wèn)題，卸載時(shí)提示up to date in，原因是node js 安裝時(shí)是默認(rèn)目錄 C:\Users\T\AppData\Roaming\npm
cdm 把路徑切換到 當(dāng)前安裝目錄。就可以卸載了

image.png

（3）安裝指定版本的Vue Cli

• 查看 Vue Cli 的所有版本號(hào)

3.x 和 4.x 的所有版本號(hào)

npm view @vue/cli versions --json

1.x 和 2.x 的所有版本號(hào)

npm view vue-cli versions --json

• 安裝指定版本號(hào)的Vue Cli

安裝 3.x 和 4.x 版本

npm install -g @vue/cli@版本號(hào)
# OR
yarn global add @vue/cli@版本號(hào)

如果不指定版本號(hào)，就是3.0+最新版本
安裝 1.x 和 2.x 版本

npm install -g vue-cli@版本號(hào)
# OR
yarn global add vue-cli@版本號(hào)

如果不指定版本號(hào)，就是2.0最高版本

• 升級(jí)版本

npm update -g @vue/cli

3.安裝后目錄結(jié)構(gòu)說(shuō)明

不同的版本目錄結(jié)構(gòu)不一樣，主要是兩種：vue-cli的3.0+和3.0之下，下面的結(jié)構(gòu)是3.0之下生成的

|-- build                            // 項(xiàng)目構(gòu)建(webpack)相關(guān)代碼
|   |-- build.js                     // 生產(chǎn)環(huán)境構(gòu)建代碼
|   |-- check-version.js             // 檢查node、npm等版本
|   |-- utils.js                     // 構(gòu)建工具相關(guān)
|   |-- vue-loader.conf.js           // webpack loader配置
|   |-- webpack.base.conf.js         // webpack基礎(chǔ)配置
|   |-- webpack.dev.conf.js          // webpack開(kāi)發(fā)環(huán)境配置,構(gòu)建開(kāi)發(fā)本地服務(wù)器
|   |-- webpack.prod.conf.js         // webpack生產(chǎn)環(huán)境配置
|-- config                           // 項(xiàng)目開(kāi)發(fā)環(huán)境配置
|   |-- dev.env.js                   // 開(kāi)發(fā)環(huán)境變量
|   |-- index.js                     // 項(xiàng)目一些配置變量
|   |-- prod.env.js                  // 生產(chǎn)環(huán)境變量
|-- src                              // 源碼目錄
|   |-- components                   // vue公共組件
|   |-- router                       // vue的路由管理
|   |-- App.vue                      // 頁(yè)面入口文件
|   |-- main.js                      // 程序入口文件，加載各種公共組件
|-- static                           // 靜態(tài)文件，比如一些圖片，json數(shù)據(jù)等
|-- .babelrc                         // ES6語(yǔ)法編譯配置
|-- .editorconfig                    // 定義代碼格式
|-- .gitignore                       // git上傳需要忽略的文件格式
|-- .postcsssrc                      // postcss配置文件
|-- README.md                        // 項(xiàng)目說(shuō)明
|-- index.html                       // 入口頁(yè)面
|-- package.json                     // 項(xiàng)目基本信息,包依賴(lài)信息等

vue-cli 3.0以上的目錄結(jié)構(gòu)

|-- src                            // 源碼目錄
|  |-- components                  // vue公共組件
|  |-- router                      // vue的路由管理
|  |-- App.vue                     // 頁(yè)面入口文件
|  |-- main.js                     // 程序入口文件，加載各種公共組件
|-- public                         // 靜態(tài)文件，比如一些圖片，json數(shù)據(jù)等
|  |-- favicon.ico                 // 圖標(biāo)文件
|  |-- index.html                  // 入口頁(yè)面
|-- vue.config.js                  // 是一個(gè)可選的配置文件，包含了大部分的vue項(xiàng)目配置
|-- .babelrc                       // ES6語(yǔ)法編譯配置
|-- .editorconfig                  // 定義代碼格式
|-- .gitignore                     // git上傳需要忽略的文件格式
|-- .postcsssrc                    // postcss配置文件
|-- README.md                      // 項(xiàng)目說(shuō)明
|-- package.json                  // 項(xiàng)目基本信息,包依賴(lài)信息等

4.vue-cli的webpack配置分析

參考：https://segmentfault.com/a/1190000008644830

4.1 開(kāi)發(fā)和生產(chǎn)環(huán)境的入口

從package.json可以看到開(kāi)發(fā)和生產(chǎn)環(huán)境的入口

  "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中的設(shè)置，build/webpack.dev.conf.js，該文件是開(kāi)發(fā)環(huán)境中webpack的配置入口。

4.啟動(dòng)、打包項(xiàng)目

一：?jiǎn)?dòng)項(xiàng)目
npm run dev
二：打包項(xiàng)目
npm run build
項(xiàng)目上線時(shí)，只需要將 dist 文件夾放到服務(wù)器就行了。