Vue CLI 3搭建vue+vuex 最全分析

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
 ESLint + Airbnb config
 ESLint + Standard config 

 ESLint + Prettier //使用較多

④ 何時檢測：

? Pick additional lint features: (Press  to select, 

⑤ 單元測試 ：

? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai //mocha靈活,只提供簡單的測試結構，如果需要其他功能需要添加其他庫/插件完成。必須在全局環境中安裝
 Jest //安裝配置簡單，容易上手。內置Istanbul，可以查看到測試覆蓋率，相較於Mocha:配置簡潔、測試代碼簡潔、易於和babel集成、內置豐富的expect

⑥ 如何存放配置 ：

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 獨立文件放置
 In package.json // 放package.json裡

⑦ 是否保存本次配置（之後可以直接使用）：

? Save this as a preset for future projects? (Y/n) // y:記錄本次配置，然後需要你起個名; n：不記錄本次配置 

（2）搭建完成：

項目結構如下（不同的預設包含不同的文件，大致結構一致）：

對比之前的項目包：

vs

精簡的只剩靈魂了~ ，主要的大的區別如下：

① 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 的用法有很多，舉常用的例子：

eg：store.js

import Vue from 'vue';
import Vuex from 'vuex'; //引入 vuex
import store from './store' //註冊store
Vue.use(Vuex); //使用 vuex
export default new Vuex.Store({
 state: {
 // 初始化狀態 

 count: 0
 },
 mutations: {
 // 處理狀態
 increment(state, payload) {
 state.count += payload.step || 1;
 }
 },
 actions: {
 // 提交改變後的狀態
 increment(context, param) {
 context.state.count += param.step;
 context.commit('increment', context.state.count)//提交改變後的state.count值
 },
 incrementStep({state, commit, rootState}) {
 if (rootState.count < 100) {
 store.dispatch('increment', {//調用increment()方法
 step: 10
 })
 }
 }
 }
})

使用時，eg：

main.js：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' //引入狀態管理 store
Vue.config.productionTip = false
new Vue({
 router,
 store,//註冊store(這可以把 store 的實例注入所有的子組件)
 render: h => h(App)
}).$mount('#app')

components/HelloWorld.vue：

② router （路由）：

vue cli 2 ：“ router/index.js ”

vue cli 3：“router.js”（用法和做的事都一樣）

③ 去掉 static 、 新增 public 文件夾

vue cli 2 ：static 是 webpack 默認存放靜態資源的文件夾，打包時會直接複製一份到dist文件夾不會經過 webpack 編譯

vue cli 3 ：摒棄 static 新增了 public 。vue cli 3 中“靜態資源”兩種處理方式：

• 經webpack 處理：在 JavaScript 被導入或在 template/CSS 中通過“相對路徑”被引用的資源會被編譯並壓縮
• 不經webpack 處理：放置在 public 目錄下或通過絕對路徑被引用的資源將會“直接被拷貝”一份，不做任何編譯壓縮處理

④ index.html ：

vue cli 2 ：“index.html ”

vue cli 3 ：“public/index.html ”此模板會被 html-webpack-plugin 處理的

⑤ src/views：vue cli 3 的 src文件夾 新增 views文件夾 用來存放 “頁面”，區分 components（組件）

⑥ 去掉 build（根據config中的配置來定義規則）、config（配置不同環境的參數）文件夾 ：

vue cli 3 中 ，這些配置 你可以通過 命令行參數、或 vue.config.js （在根目錄 新建一個 vue.config.js 同名文件）裡的 devServer 字段配置開發服務器

⑦ babel.config.js：配置Babel 。Vue CLI 使用了 Babel 7 中的新配置格式 babel.config.js。和 .babelrc 或 package.json 中的 babel 字段不同，這個配置文件不會使用基於文件位置的方案，而是會一致地運用到項目根目錄以下的所有文件，包括 node_modules 內部的依賴。官方推薦在 Vue CLI 項目中始終使用 babel.config.js 取代其它格式。

⑧ 根目錄的一些其他文件的改變：之前所有的配置文件都在vue create 搭建時preset預設 或者 後期可以通過 命令參數 、 vue.config.js 中配置

根據需要在根目錄下新建 vue.config.js自行配置，eg：（簡單配置，更多配置詳情參見官網：https://cli.vuejs.org/zh/config/）

module.exports = {
 baseUrl: '/',// 部署應用時的根路徑(默認'/'),也可用相對路徑(存在使用限制)
 outputDir: 'dist',// 運行時生成的生產環境構建文件的目錄(默認''dist''，構建之前會被清除)
 assetsDir: '',//放置生成的靜態資源(s、css、img、fonts)的(相對於 outputDir 的)目錄(默認'')
 indexPath: 'index.html',//指定生成的 index.html 的輸出路徑(相對於 outputDir)也可以是一個絕對路徑。
 pages: {//pages 裡配置的路徑和文件名在你的文檔目錄必須存在 否則啟動服務會報錯
 index: {//除了 entry 之外都是可選的
 entry: 'src/index/main.js',// page 的入口,每個“page”應該有一個對應的 JavaScript 入口文件
 template: 'public/index.html',// 模板來源
 filename: 'index.html',// 在 dist/index.html 的輸出
 title: 'Index Page',// 當使用 title 選項時,在 template 中使用：