這是什么

vue-automation 是一款開(kāi)箱即用的 Vue 項(xiàng)目模版，它基于 Vue CLI 4

眾所周知，雖然 Vue CLI 提供了腳手架的功能，但由于官方的腳手架過(guò)于簡(jiǎn)單，運(yùn)用在實(shí)際項(xiàng)目開(kāi)發(fā)上的時(shí)候，我們還需要做很多事情，而 vue-automation 就是來(lái)解決這一痛點(diǎn)，讓你的開(kāi)發(fā)效率至少提升 50% 以上。

特點(diǎn)

• 默認(rèn)集成 vue-router 、vuex 和 axios
• 全局 SCSS 資源自動(dòng)引入
• 全局組件自動(dòng)注冊(cè)
• 支持 SVG 圖標(biāo)，CSS 精靈圖自動(dòng)合成
• 支持 mock 數(shù)據(jù)，可擺脫后端束縛獨(dú)立開(kāi)發(fā)
• 支持 GZip 和 CDN 優(yōu)化項(xiàng)目體積/加載速度
• 結(jié)合 IDE 插件、ESlint 、stylelint 、Git 鉤子，輕松實(shí)現(xiàn)團(tuán)隊(duì)代碼規(guī)范

功能介紹

配置

默認(rèn)提供開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境兩套配置，分別在根目錄下 .env.development 和 .env.production 文件里，可配置項(xiàng)有網(wǎng)站標(biāo)題、接口請(qǐng)求地址和是否開(kāi)啟CDN支持。

開(kāi)發(fā)者可根據(jù)實(shí)際業(yè)務(wù)需求進(jìn)行擴(kuò)展，如果對(duì)這塊不熟悉，可閱讀 Vue CLI 環(huán)境變量和模式 章節(jié)。

全局 SCSS 資源

全局 SCSS 資源并不是全局樣式，是變量、@mixin 、@function 這些東西

在 assets/styles/resources/ 目錄下存放全局的 SCSS 資源，也就是說(shuō)在這個(gè)目錄里的文件，無(wú)需在頁(yè)面上引用即可生效并使用。

項(xiàng)目中默認(rèn)存放了 utils.scss 文件，里面有幾個(gè) @mixin 和 % ，你可以嘗試在頁(yè)面中使用它們看看效果。

同樣，精靈圖目錄下生成的 SCSS 資源也是全局可調(diào)用的。

精靈圖

又稱雪碧圖，原理是將多張小圖合并到一張大圖上，以便減少 HTTP 請(qǐng)求，提高網(wǎng)站訪問(wèn)速度。

精靈圖原始圖片的存放位置位于 assets/sprites/ 目錄下，注意按文件夾區(qū)分。

項(xiàng)目運(yùn)行前會(huì)根據(jù)文件夾生成對(duì)應(yīng)的精靈圖文件（精靈圖圖片和 .scss 文件），多個(gè)文件夾則會(huì)生成多個(gè)精靈圖文件。需要注意的是，在項(xiàng)目運(yùn)行時(shí)，修改文件夾里的圖片，會(huì)重新生成相關(guān)精靈圖文件，但如果新建文件夾，則需要重新運(yùn)行項(xiàng)目才會(huì)生成對(duì)應(yīng)精靈圖文件。

在 .vue 文件中可通過(guò) @include 直接使用精靈圖，無(wú)需手動(dòng)引入 .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; 
} 

如果是小型項(xiàng)目，靜態(tài)圖標(biāo)不多，可全部放在一個(gè)文件夾內(nèi)；如果是中大型項(xiàng)目，文件夾可按模塊來(lái)劃分，這樣不同的模塊最終會(huì)生成各自的精靈圖文件。

SVG 圖標(biāo)

現(xiàn)在越來(lái)越多項(xiàng)目開(kāi)始使用 SVG 圖標(biāo)做為精靈圖的替代品，本框架也提供了 SVG 圖標(biāo)支持，方便使用。推薦去 阿里巴巴矢量圖標(biāo)庫(kù) 下載高質(zhì)量 SVG 圖標(biāo)

首先將 svg 文件放到 src/assets/icons/ 目錄下，然后在頁(yè)面中就可以使用了， name 就是 svg 文件名

<svg-icon name="example" /> 

<svg-icon /> 組件為全局組件，所以無(wú)需注冊(cè)即可使用

全局組件

全局組件存放在 components/global/ 目錄下，需要注意各個(gè)組件按文件夾區(qū)分。

每個(gè)組件的文件夾內(nèi)至少保留一個(gè)文件名為 index 的組件入口，例如 index.vue 。

組件必須設(shè)置 name 并保證其唯一，自動(dòng)注冊(cè)會(huì)將組件的 name 設(shè)為組件名，可參考 SvgIcon 組件寫(xiě)法。

雖然文件夾名稱和 name 無(wú)關(guān)聯(lián)，但建議與 name 保持一致。

如果組件是通過(guò) js 進(jìn)行調(diào)用，則確保組件入口文件為 index.js ，可參考 ExampleNotice 組件。

Vue-router

路由也實(shí)現(xiàn)了自動(dòng)注冊(cè)，但因?yàn)橛袃?yōu)先級(jí)的概念，先定義的會(huì)先匹配，所以同一模塊下的路由需要放在一個(gè)路由配置文件里。

開(kāi)發(fā)者只需關(guān)心 router/modules/ 目錄下的文件，一個(gè)模塊對(duì)應(yīng)一個(gè) .js 文件，可參考 router/modules/example.js 文件。

Vuex

Vuex 同樣實(shí)現(xiàn)了自動(dòng)注冊(cè)，開(kāi)發(fā)只需關(guān)注 store/modules/ 文件夾里的文件即可，同樣也按照模塊區(qū)分文件。

新建模版：

// example.js 
const state = {} 
const getters = {} 
const actions = {} 
const mutations = {} 
export default { 
    namespaced: true, 
    state, 
    actions, 
    getters, 
    mutations 
} 

文件默認(rèn)開(kāi)啟命名空間，文件名會(huì)默認(rèn)注冊(cè)為模塊名。

使用方法：

this.$store.state.example.xxx; 
this.$store.getters['example/xxx']; 
this.$store.dispatch('example/xxx'); 
this.$store.commit('example/xxx'); 

Axios 攔截器

攔截器的用處就是攔截每一次的請(qǐng)求和響應(yīng)，然后做一些全局的處理。

例如接口響應(yīng)報(bào)錯(cuò)，可以在攔截器里用統(tǒng)一的報(bào)錯(cuò)提示來(lái)展示，方便業(yè)務(wù)開(kāi)發(fā)。

本框架提供了一份攔截器參考代碼 src/api/index.js ，因?yàn)槊總€(gè)公司提供的接口標(biāo)準(zhǔn)不同，所以該文件需要開(kāi)發(fā)者根據(jù)各自公司的接口去定制對(duì)應(yīng)的攔截器。

代碼很簡(jiǎn)單，首先初始化 axios 對(duì)象，然后 axios.interceptors.request.use() 和 axios.interceptors.response.use() 就分別是請(qǐng)求和響應(yīng)的攔截代碼了。

參考代碼里只做了簡(jiǎn)單的攔截處理，例如請(qǐng)求的時(shí)候會(huì)自動(dòng)帶上 token ，響應(yīng)的時(shí)候會(huì)根據(jù)錯(cuò)誤信息判斷是登錄失效還是接口報(bào)錯(cuò)。

快速創(chuàng)建文件

該功能基于 plop 實(shí)現(xiàn)。

開(kāi)發(fā)過(guò)程中，避免不了手動(dòng)去頻繁創(chuàng)建頁(yè)面、組件等文件，并且還要在文件里寫(xiě)一些必要的代碼，是不是覺(jué)得很麻煩？現(xiàn)在你可以用更簡(jiǎn)潔的方式來(lái)處理這一切。

模版默認(rèn)提供了 page(頁(yè)面/布局) 、component(組件) 、store(全局狀態(tài)) 三個(gè)模版文件，通過(guò) yarn new 指令可以自行選擇。

在實(shí)際項(xiàng)目開(kāi)發(fā)中，建議根據(jù)項(xiàng)目定制適合項(xiàng)目的模版文件，可以大大提高開(kāi)發(fā)效率，當(dāng)多人協(xié)作開(kāi)發(fā)時(shí)，也能統(tǒng)一部分標(biāo)準(zhǔn)。

模版目錄為 ./plop-templates/ ，如果是新建模版，記得在項(xiàng)目根目錄 plopfile.js 里引用一下。

代碼規(guī)范：IDE 編輯器

為保證代碼風(fēng)格統(tǒng)一，統(tǒng)一使用 VS Code 做為開(kāi)發(fā) IDE ，并安裝以下擴(kuò)展：

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

安裝完后在 settings.json 中增加如下配置：

"editor.codeActionsOnSave": { 
    "source.fixAll.eslint": true, 
    "source.fixAll.stylelint": true 
} 

最終效果為，在保存時(shí)，會(huì)自動(dòng)對(duì)當(dāng)前文件進(jìn)行代碼格式化操作。

代碼規(guī)范：Git 鉤子

上述操作僅對(duì)代碼的寫(xiě)法規(guī)范進(jìn)行格式化，例如縮進(jìn)、空格、結(jié)尾的分號(hào)等。

而在提交代碼時(shí)， Git 的鉤子會(huì)檢查代碼中是否有錯(cuò)誤，這些錯(cuò)誤是 IDE 無(wú)法自動(dòng)修復(fù)的，例如出現(xiàn)未使用過(guò)的變量。如果有錯(cuò)誤，則會(huì)取消此次提交，直到開(kāi)發(fā)者修復(fù)完所有錯(cuò)誤后才允許提交成功，確保倉(cāng)庫(kù)里的代碼絕對(duì)正確。

可通過(guò)修改 .eslintignore 和 .stylelintignore 忽略無(wú)需做代碼規(guī)范的文件，例如在項(xiàng)目中引用了一些第三方的插件或組件，我們就可以將其忽略

如果 git init 倉(cāng)庫(kù)初始化是在依賴包安裝之后執(zhí)行的，則無(wú)法初始化 Git 鉤子，建議在 git init 之后再執(zhí)行一遍 yarn 或者 npm i ，重新安裝一遍依賴包。

代碼規(guī)范：配置代碼規(guī)范

配置文件主要有 3 處，分別為 IDE 配置（ .editorconfig ）、ESLint 配置（ .eslintrc.js 和 .eslintignore ）、StyleLint 配置（ .stylelintrc 和 .stylelintignore ）。

以代碼縮進(jìn)舉例，本模版默認(rèn)是以 4 空格進(jìn)行縮進(jìn)，如果要調(diào)整為 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 

修改完畢后，再分別執(zhí)行下面兩句命令：

yarn run lint 
yarn run stylelint 

該操作會(huì)將代碼進(jìn)行一次格式校驗(yàn)，如果規(guī)則支持自動(dòng)修復(fù)，則會(huì)將不符合規(guī)則的代碼自動(dòng)進(jìn)行格式化。

以上面的例子，當(dāng)縮進(jìn)規(guī)則調(diào)整后，我們無(wú)需手動(dòng)去每個(gè)文件調(diào)整，通過(guò)命令可以自動(dòng)應(yīng)用新的縮進(jìn)規(guī)則。

擴(kuò)展功能

除了以上常用功能介紹外， vue-automation 還支持 mock 、CDN 、GZip 和移動(dòng)端等相關(guān)配置，方便適應(yīng)任何開(kāi)發(fā)場(chǎng)景，真正做到了開(kāi)箱即用。

生態(tài)

在我目前所在的公司里， vue-automation 已經(jīng)穩(wěn)定用于數(shù)十個(gè)真實(shí)項(xiàng)目上，覆蓋企業(yè)官網(wǎng)、商城、數(shù)字大屏、微信公眾號(hào)等多個(gè)不同領(lǐng)域。

同時(shí)在其基礎(chǔ)上，擴(kuò)展開(kāi)發(fā)出了一套獨(dú)立的 中后臺(tái)系統(tǒng)框架 ： Fantastic-admin ，在易用的基礎(chǔ)上保證了功能全面，超越市面上大部分同類框架。

新年展望

在 2021 年， vue-automation 將會(huì)全新升級(jí)，全面支持 Vue 3

最后祝大家新年快樂(lè)，讓我們一起對(duì) 2020 說(shuō)再見(jiàn)吧！