眾所周知，雖然 Vue CLI 提供了腳手架的功能，但由於官方的腳手架過於簡單，生成好的專案在實際專案開發的時候，還需要做很多事情，而 vue-automation 就是來解決這一痛點，讓你的開發效率至少提升 50% 以上
這是什麼
vue-automation 是一款開箱即用的 Vue 專案模版，它基於 Vue CLI 4
特點
- 預設整合 vue-router 、vuex 和 axios
- 全域性 SCSS 資源自動引入
- 全域性元件自動註冊
- 支援 SVG 圖示，CSS 精靈圖自動合成
- 支援 mock 資料，可擺脫後端束縛獨立開發
- 支援 GZip 和 CDN 優化專案體積/載入速度
- 結合 IDE 外掛、ESlint 、stylelint 、Git 鉤子，輕鬆實現團隊程式碼規範
功能介紹
配置
預設提供開發環境和生產環境兩套配置，分別在根目錄下 .env.development 和 .env.production 檔案裡，可配置項有網站標題、介面請求地址和是否開啟CDN支援。
開發者可根據實際業務需求進行擴充套件，如果對這塊不熟悉，可閱讀 Vue CLI 環境變數和模式 章節。
全域性 SCSS 資源
全域性 SCSS 資源並不是全域性樣式，是變數、@mixin 、@function 這些東西
在 assets/styles/resources/ 目錄下存放全域性的 SCSS 資源，也就是說在這個目錄裡的檔案，無需在頁面上引用即可生效並使用。
專案中預設存放了 utils.scss 檔案，裡面有幾個 @mixin 和 % ，你可以嘗試在頁面中使用它們看看效果。
同樣，精靈圖目錄下生成的 SCSS 資源也是全域性可呼叫的。
精靈圖
又稱雪碧圖，原理是將多張小圖合併到一張大圖上，以便減少 HTTP 請求，提高網站訪問速度。
精靈圖原始圖片的存放位置位於 assets/sprites/ 目錄下，注意按資料夾區分。
專案執行前會根據資料夾生成對應的精靈圖檔案（精靈圖圖片和 .scss 檔案），多個資料夾則會生成多個精靈圖檔案。需要注意的是，在專案執行時，修改資料夾裡的圖片，會重新生成相關精靈圖檔案，但如果新建資料夾，則需要重新執行專案才會生成對應精靈圖檔案。
在 .vue 檔案中可通過 @include 直接使用精靈圖，無需手動引入 .scss 檔案：
// 方法 1
// @include [資料夾名稱]-sprite([檔名稱]);
.icon {
@include example-sprite(address);
}
// 方法 2
// @include all-[資料夾名稱]-sprites;
@include all-example-sprites;
最終輸出如下：
/* 方法 1 */
.icon {
background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);
background-position: 0px 0px;
background-size: 210px 210px;
width: 100px;
height: 100px;
}
/* 方法 2 */
.example-address-sprites {
background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);
background-position: 0 0;
background-size: 210px 210px;
width: 100px;
height: 100px;
}
.example-feedback-sprites {
background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);
background-position: -110px 0;
background-size: 210px 210px;
width: 100px;
height: 100px;
}
.example-payment-sprites {
background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);
background-position: 0 -110px;
background-size: 210px 210px;
width: 100px;
height: 100px;
}
如果是小型專案，靜態圖示不多，可全部放在一個資料夾內；如果是中大型專案，資料夾可按模組來劃分，這樣不同的模組最終會生成各自的精靈圖檔案。
SVG 圖示
現在越來越多專案開始使用 SVG 圖示做為精靈圖的替代品，本框架也提供了 SVG 圖示支援，方便使用。推薦去阿里巴巴向量圖示庫下載高質量 SVG 圖示
首先將 svg 檔案放到 src/assets/icons/ 目錄下，然後在頁面中就可以使用了，name 就是 svg 檔名
<svg-icon name="example" />
<svg-icon />元件為全域性元件，所以無需註冊即可使用
全域性元件
全域性元件存放在 components/global/ 目錄下，需要注意各個元件按資料夾區分。
每個元件的資料夾內至少保留一個檔名為 index 的元件入口，例如 index.vue 。
元件必須設定 name 並保證其唯一，自動註冊會將元件的 name 設為元件名，可參考 SvgIcon 元件寫法。
雖然資料夾名稱和 name 無關聯，但建議與 name 保持一致。
如果元件是通過 js 進行呼叫，則確保元件入口檔案為 index.js，可參考 ExampleNotice 元件。
Vue-router
路由也實現了自動註冊，但因為有優先順序的概念，先定義的會先匹配，所以同一模組下的路由需要放在一個路由配置檔案裡。
開發者只需關心 router/modules/ 目錄下的檔案，一個模組對應一個 .js 檔案，可參考 router/modules/example.js 檔案。
Vuex
Vuex 同樣實現了自動註冊，開發只需關注 store/modules/ 資料夾裡的檔案即可，同樣也按照模組區分檔案。
新建模版：
// example.js
const state = {}
const getters = {}
const actions = {}
const mutations = {}
export default {
namespaced: true,
state,
actions,
getters,
mutations
}
檔案預設開啟名稱空間，檔名會預設註冊為模組名。
使用方法：
this.$store.state.example.xxx;
this.$store.getters['example/xxx'];
this.$store.dispatch('example/xxx');
this.$store.commit('example/xxx');
Axios 攔截器
攔截器的用處就是攔截每一次的請求和響應，然後做一些全域性的處理。
例如介面響應報錯，可以在攔截器裡用統一的報錯提示來展示，方便業務開發。
本框架提供了一份攔截器參考程式碼 src/api/index.js ，因為每個公司提供的介面標準不同，所以該檔案需要開發者根據各自公司的介面去定製對應的攔截器。
程式碼很簡單，首先初始化 axios 物件，然後 axios.interceptors.request.use() 和 axios.interceptors.response.use() 就分別是請求和響應的攔截程式碼了。
參考程式碼裡只做了簡單的攔截處理，例如請求的時候會自動帶上 token ，響應的時候會根據錯誤資訊判斷是登入失效還是介面報錯。
快速建立檔案
該功能基於 plop 實現。
開發過程中，避免不了手動去頻繁建立頁面、元件等檔案，並且還要在檔案裡寫一些必要的程式碼，是不是覺得很麻煩？現在你可以用更簡潔的方式來處理這一切。
模版預設提供了 page(頁面/佈局) 、component(元件) 、store(全域性狀態) 三個模版檔案，通過 yarn new 指令可以自行選擇。
在實際專案開發中，建議根據專案定製適合專案的模版檔案，可以大大提高開發效率，當多人協作開發時，也能統一部分標準。
模版目錄為 ./plop-templates/ ，如果是新建模版，記得在專案根目錄 plopfile.js 裡引用一下。
程式碼規範：IDE 編輯器
為保證程式碼風格統一，統一使用 VS Code 做為開發 IDE ，並安裝以下擴充套件：
安裝完後在 settings.json 中增加如下配置：
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
}
最終效果為，在儲存時，會自動對當前檔案進行程式碼格式化操作。
程式碼規範：Git 鉤子
上述操作僅對程式碼的寫法規範進行格式化，例如縮排、空格、結尾的分號等。
而在提交程式碼時， Git 的鉤子會檢查程式碼中是否有錯誤，這些錯誤是 IDE 無法自動修復的，例如出現未使用過的變數。如果有錯誤，則會取消此次提交，直到開發者修復完所有錯誤後才允許提交成功，確保倉庫裡的程式碼絕對正確。
可通過修改
.eslintignore和.stylelintignore忽略無需做程式碼規範的檔案，例如在專案中引用了一些第三方的外掛或元件，我們就可以將其忽略
如果 git init 倉庫初始化是在依賴包安裝之後執行的，則無法初始化 Git 鉤子，建議在 git init 之後再執行一遍 yarn 或者 npm i ，重新安裝一遍依賴包。
程式碼規範：配置程式碼規範
配置檔案主要有 3 處，分別為 IDE 配置（.editorconfig）、ESLint 配置（.eslintrc.js 和 .eslintignore）、StyleLint 配置（.stylelintrc 和 .stylelintignore）。
以程式碼縮排舉例，本模版預設是以 4 空格進行縮排，如果要調整為 2 空格，則需要在 .editorconfig 裡修改：
indent_size = 2
在 .eslintrc.js 裡修改：
'indent': [2, 2, {
'SwitchCase': 1
}],
...
'vue/html-indent': [2, 2],
...
'vue/script-indent': [2, 2, {
'switchCase': 1
}]
在 .stylelintrc 裡修改：
"indentation": 2
修改完畢後，再分別執行下面兩句命令：
yarn run lint
yarn run stylelint
該操作會將程式碼進行一次格式校驗，如果規則支援自動修復，則會將不符合規則的程式碼自動進行格式化。
以上面的例子，當縮排規則調整後，我們無需手動去每個檔案調整，通過命令可以自動應用新的縮排規則。
擴充套件功能
除了以上常用功能介紹外，vue-automation 還支援 mock 、CDN 、GZip 和移動端等相關配置，方便適應任何開發場景，真正做到了開箱即用。
生態
在我目前所在的公司裡，vue-automation 已經穩定用於數十個真實專案上，覆蓋企業官網、商城、數字大屏、微信公眾號等多個不同領域。
同時在其基礎上，擴充套件開發出了一套獨立的中後臺系統框架：Fantastic-admin ，在易用的基礎上保證了功能全面，超越市面上大部分同類框架。
新年展望
在 2021 年，vue-automation 將會全新升級，全面支援 Vue 3
最後祝大家新年快樂，讓我們一起對 2020 說再見吧！