收下這款 Vue 項目模版，它將讓你的開發效率在 2021 年提升 50%

衆所周知，雖然 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 ，並安裝如下擴展：

• EditorConfig for VS Code
• ESLint
• Vetur
• Prettier - Code formatter
• stylelint

安裝完後在 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 說再見吧！