怎麼用Vuecli 3.0快速建立專案
一.安裝
1.安裝node.js，這裡需要注意的是，Vue CLI 3需要 nodeJs ≥ 8.9，所以我們去中文官方下載地址：http://nodejs.cn/download/ ，下載最新版本即可；
2.安裝vue-cli3.0版本：
兩種情況：1.你之前安裝過vue-cli3.0之前的版本，需解除安裝之前版本，再安裝新版本；
解除安裝舊版本：
npm uninstall vue-cli -g
安裝新版本：
npm install -g @vue/cli
2.你之前沒有安裝過vue-cli3.0之前的版本，直接安裝新版本即可；
3.安裝nrm，有時候國外資源太慢，使用這個就可以快速地在 npm 源間切換：
1.全域性安裝nrm
npm install -g nrm
2.檢視當前使用源
nrm current
3.檢視可選源（帶*號即為當前使用源）
nrm ls
4.切換源
以淘寶映象為例：
nrm use taobao
5.測試源速度（即響應時間）
比如：測試官方源和淘寶源的響應時間
nrm test npm
nrm test taobao
可以得出，淘寶源的速度要遠快於官方源，安裝完nrm之後，我們進行建立專案，我們下載和搭建的速度就會快很多，才能稱上快速兩個字；
二.建立專案
1.新建專案
vue create jjrweb //後面為檔名 不支援駝峰（含大寫字母）
彈出如下介面：
1.第一個“ my-default”是我之前儲存的預設配置，等下下面會介紹到；
2.default（babel，eslint）：預設套餐，提供 babel 和 eslint 支援；
3.Manually select features：自己去選擇需要的功能，提供更多的特性選擇。比如如果想要支援 TypeScript ，就應該選擇這一項；
如果想要更多的支援，這裡我選擇Manually select features：切換到這項，按下 enter 鍵選中，
彈出如下介面：
可以多選：使用方向鍵在特性選項之間切換，使用空格鍵選中當前特性，使用 a 鍵切換選擇所有，使用 i 鍵翻轉選項。
( ) Babel //轉碼器，可以將ES6程式碼轉為ES5程式碼，從而在現有環境執行。 ( ) TypeScript// TypeScript是一個JavaScript（字尾.js）的超集（字尾.ts）包含並擴充套件了 JavaScript 的語法，需要被編譯輸出為 JavaScript在瀏覽器執行，目前較少人再用 ( ) Progressive Web App (PWA) Support// 漸進式Web應用程式 ( ) Router // vue-router（vue路由） ( ) Vuex // vuex（vue的狀態管理模式） ( ) CSS Pre-processors // CSS 前處理器（如：less、sass） ( ) Linter / Formatter // 程式碼風格檢查和格式化（如：ESlint） ( ) Unit Testing // 單元測試（unit tests） ( ) E2E Testing // e2e（end to end） 測試
這裡我選擇的為圖片中的選項，回車：
彈出如下介面：
是否使用history router：這裡我選擇NO，後期如果要改成history，手動去路由裡新增即可，回車；
彈出如下介面：
css前處理器，主要為css解決瀏覽器相容、簡化CSS程式碼 等問題，你習慣使用哪種選擇哪種即可，這裡我選擇Less
彈出如下介面：
ESLint：提供一個外掛化的javascript程式碼檢測工具，ESLint + Prettier //使用較多，這裡我選擇ESLint + Prettier
彈出如下介面：
何時檢測：這裡我選擇Lint on save 儲存時檢測
彈出如下介面：
如何存放配置 ：這裡我選擇圖中選擇
彈出如下介面：
是否儲存本次配置（y:記錄本次配置，然後需要你起個名; n：不記錄本次配置）：這裡我選擇NO，上文中正好說到這個，如果你選擇yes，下次建立專案的時候就可以選擇按之前模板來
彈出如下介面：
搭建完成：可以進入到該專案資料夾，然後執行專案；
2.專案結構
精簡了很多，但還是和vue2.0有很多區別的，基本的用法變化不是特別大，如圖：
3.vue-cli2.0和vue-cli3.0的區別
1.vuex（狀態管理）：
vue cli 2 中 ：vuex是搭建完成後自己npm install的，並不包括在搭建過程中。可以看到vue cli 2的vuex預設資料夾（store）又包含了三個js檔案：action（存放一些呼叫外部API介面的非同步執行的的方法，然後commit mutations改變mutations 資料）、index（初始化mutations 資料，是store的出口）、mutations（處理資料邏輯的同步執行的方法的集合，Vuex中store資料改變的唯一方法commit mutations）
vue cli 3 中：vuex是包含在搭建過程供選擇的預設。vue cli 3 中預設只用一個store.js代替了原來的store資料夾中的三個js檔案。action、mutations、state以及store 的 getters 的用法有很多
2.router （路由）：
vue cli 2 ：“ router/index.js ”
vue cli 3：“router.js”（用法和做的事都一樣）
3.去掉 static 、 新增 public 資料夾
vue cli 2 ：static 是 webpack 預設存放靜態資源的資料夾，打包時會直接複製一份到dist資料夾不會經過 webpack 編譯
vue cli 3 ：摒棄 static 新增了 public 。vue cli 3 中“靜態資源”兩種處理方式：
經webpack 處理：在 JavaScript 被匯入或在 template/CSS 中通過“相對路徑”被引用的資源會被編譯並壓縮
不經webpack 處理：放置在 public 目錄下或通過絕對路徑被引用的資源將會“直接被拷貝”一份，不做任何編譯壓縮處理
4.index.html ：
vue cli 2 ：“index.html ”
vue cli 3 ：“public/index.html ”此模板會被 html-webpack-plugin 處理的
5.src/views：
vue cli 3 的 src資料夾 新增 views資料夾 用來存放 “頁面”，區分 components（元件）
6.去掉 build（根據config中的配置來定義規則）、config（配置不同環境的引數）資料夾 ：
vue cli 3 中，這些配置 你可以通過 命令列引數、或 vue.config.js （在根目錄 新建一個 vue.config.js 同名檔案）裡的 devServer 欄位配置開發伺服器
7.babel.config.js：
配置Babel 。Vue CLI 使用了 Babel 7 中的新配置格式 babel.config.js。和 .babelrc 或 package.json 中的 babel 欄位不同，這個配置檔案不會使用基於檔案位置的方案，而是會一致地運用到專案根目錄以下的所有檔案，包括 node_modules 內部的依賴。官方推薦在 Vue CLI 專案中始終使用 babel.config.js 取代其它格式。
8.根目錄的一些其他檔案的改變：
之前所有的配置檔案都在vue create 搭建時preset預設 或者 後期可以通過 命令引數 、 vue.config.js 中配置
三.專案編寫
1.在package.json檔案中新增
"scripts": {
"serve": "vue-cli-service serve", //呼叫開發api
"build": "vue-cli-service build", //上線
"test": "vue-cli-service build --mode test",//需要新增的內容，測試
},
2.在根目錄下建立.env檔案，並配置
NODE_ENV = 'production' VUE_APP_FLAG = 'pro' //vue程式碼可以直接使用VUE_APP_名字
3.在根目錄下建立.env.test檔案
NODE_ENV = 'production' VUE_APP_FLAG = 'test'
4.在根目錄下建立vue.config.js
module.express = {
baseUrl: process.env.NODE_ENV === 'production' ? '/static/' : './',
devServer: {
port: 埠號,
proxy: {
'/api': {
target: 'https://movie.douban.com/', // target host
ws: true, // proxy websockets
changeOrigin: true, // needed for virtual hosted sites
pathRewrite: {
'^/api': '' // rewrite path
}
},
}
}
baseUrl: '/', //基本路徑，不要隨意更改
outputDir: `dist-${process.env.NODE_ENV}`, // 打包生成目錄
assetDir: 'static',
lintOnSave: false,
runtimeCompiler: true, // 是否使用包含執行時編譯器的 Vue 構建版本
productionSourceMap: false, // 生產環境的 source map
}
5.在main.js裡配置api變數
/*第一層if判斷生產環境和開發環境*/
if (process.env.NODE_ENV === 'production') {
/*第二層if，根據.env檔案中的VUE_APP_FLAG判斷是生產環境還是測試環境*/
if (process.env.VUE_APP_FLAG === 'pro') {
//production 生產環境
axios.defaults.baseURL = 'http://www.aaaa.com';//路徑
} else {
//test 測試環境
axios.defaults.baseURL = 'http://192.168.0.152:8102';//路徑
} } else { //dev 開發環境 axios.defaults.baseURL = 'http://192.168.0.152:8102';//路徑
}
6.打包
npm run test
&n