背景：做業(yè)務(wù)，總是免不了面對(duì)那些快速開(kāi)發(fā)的需求，快速開(kāi)發(fā)意味著給開(kāi)發(fā)者的時(shí)間不多，如果有一套基礎(chǔ)的模板存在，就可以省掉不少前期的工作，而專心于業(yè)務(wù)的開(kāi)發(fā)

為什么需要一個(gè)基礎(chǔ)模板

這個(gè)問(wèn)題實(shí)際問(wèn)的是，vue-cli本身提供的那一套模板不好么？是的，一般來(lái)講我們都會(huì)通過(guò)vue-cli去快速啟動(dòng)一個(gè)項(xiàng)目，但問(wèn)題是創(chuàng)建出來(lái)的那套項(xiàng)目模板過(guò)于基礎(chǔ)簡(jiǎn)單，而我們實(shí)際業(yè)務(wù)開(kāi)發(fā)場(chǎng)景需要更多的基礎(chǔ)設(shè)施——比如請(qǐng)求工具等常用的配套設(shè)施。如果每一次的項(xiàng)目在創(chuàng)建完之后，還需要花費(fèi)一些時(shí)間去新增一些配套設(shè)施，無(wú)疑是浪費(fèi)了寶貴的開(kāi)發(fā)時(shí)間（畢竟產(chǎn)品和項(xiàng)目經(jīng)理并沒(méi)有算上你搭建基礎(chǔ)框架的時(shí)間），而且理論上這部分工作是重復(fù)性的，是可以被抽離出來(lái)的。當(dāng)然，每個(gè)公司的業(yè)務(wù)場(chǎng)景都不同，以下介紹只是一部分業(yè)務(wù)需要的基礎(chǔ)項(xiàng)目模板。

基礎(chǔ)模板應(yīng)該包含哪些功能

vue-cli創(chuàng)建的項(xiàng)目模板已經(jīng)包含了很多基本的配置，如ESLint等，我們僅需進(jìn)行簡(jiǎn)單的擴(kuò)展即可。擴(kuò)展內(nèi)容如下：

• 默認(rèn)啟用ESLint
• 基礎(chǔ)CSS類添加
• 圖標(biāo)icon添加
• http請(qǐng)求工具

在以上的四個(gè)配置添加后，基本就可以填補(bǔ)默認(rèn)腳手架生成模板的空缺了。有些人可能會(huì)問(wèn)，為啥沒(méi)有包含路由的配置項(xiàng)？我認(rèn)為路由未必是每個(gè)項(xiàng)目都需要的，很多的項(xiàng)目只是一個(gè)簡(jiǎn)單的活動(dòng)頁(yè)面，沒(méi)有太多的頁(yè)面跳轉(zhuǎn)，而且添加路由本身的成本也不高，所以沒(méi)有配置上去。接下來(lái)便展開(kāi)來(lái)講這四個(gè)配置分別要做什么。

默認(rèn)啟用ESLint

ESLint可以在vue-cli生成時(shí)進(jìn)行指定啟用，這里出現(xiàn)的問(wèn)題是，想要大部分遵循已有的規(guī)則，少部分修改。什么意思呢？按照Standard的方案，縮進(jìn)是兩個(gè)空格，但團(tuán)隊(duì)里面都是使用4個(gè)空格進(jìn)行縮進(jìn)的，這個(gè)時(shí)候就要進(jìn)行覆蓋了，這就是部分修改的地方。本次基礎(chǔ)模板擴(kuò)展中，ESLint的部分使用了Standard的集成方案，并進(jìn)行了部分規(guī)則重寫(xiě)，具體可以按照?qǐng)F(tuán)隊(duì)的規(guī)則來(lái)走。

基礎(chǔ)CSS類添加

一個(gè)web項(xiàng)目搭建過(guò)程中，肯定會(huì)碰到樣式布局的一部分，一般來(lái)講會(huì)包括以下兩個(gè)方面：

• css初始化，目的是統(tǒng)一各瀏覽器差異
• 通用css類添加，比如主題顏色等定義

其中通用的css類我們可以通過(guò)預(yù)處理語(yǔ)言來(lái)形成，比如使用 SCSS/SASS。引入預(yù)處理語(yǔ)言后，便可以定義一些基本變量如顏色值，并通過(guò)webpack配置注入到所有組件中，如下所示：

在所有組件中注入全局scss變量

1. 想一個(gè)css 類名
2. 新建一個(gè)style標(biāo)簽/在原有的style標(biāo)簽下編寫(xiě).class-name { font-size: 18px; }

抽出padding類，0~100都有

圖標(biāo)icon添加

icon其實(shí)并不是所有的項(xiàng)目都會(huì)用到，但考慮到要配置還是需要花一點(diǎn)時(shí)間的原因，便也加入基礎(chǔ)模板的范圍。這里主要采用svg-icon，詳細(xì)的介紹可以參考大佬文章《手摸手，帶你優(yōu)雅使用icon》。大概介紹一下svg icon的配置，需要編寫(xiě)一個(gè)簡(jiǎn)單的svg組件+svg-sprite配置+自動(dòng)化導(dǎo)入svg設(shè)置，這些都可以集成到基礎(chǔ)模板中，使用只需要導(dǎo)入相應(yīng)的svg圖標(biāo)即可。

HTTP請(qǐng)求工具

相信90%以上的頁(yè)面都會(huì)與接口交互，所以HTTP請(qǐng)求工具我們也可以內(nèi)置在模板中。這里使用axios作為HTTP請(qǐng)求的庫(kù)，當(dāng)然你也可以使用原生的fetchAPI，按團(tuán)隊(duì)喜好來(lái)就是了。對(duì)于HTTP請(qǐng)求工具，常見(jiàn)的有以下幾個(gè)需求：

• 根據(jù)不同的環(huán)境，切換不同的接口URL前綴
• 統(tǒng)一超時(shí)處理
• 請(qǐng)求/響應(yīng)攔截
• 封裝GET/POST方法

這些配置都不難，可以在axios的文檔中找到。其中，對(duì)于 請(qǐng)求/響應(yīng)攔截這塊，通常會(huì)做的是根據(jù)接口定義的不同狀態(tài)碼進(jìn)行成功/失敗的判斷，個(gè)人會(huì)將所有失敗的情況都拋到reject方法中處理，而且成功時(shí)只拋出關(guān)鍵數(shù)據(jù)，這樣在使用.then獲取接口數(shù)據(jù)時(shí)，就能少了一些狀態(tài)碼的判斷，且直接就能獲取關(guān)鍵數(shù)據(jù)。

響應(yīng)攔截偽代碼

優(yōu)化基礎(chǔ)項(xiàng)目模板

細(xì)心的同學(xué)可能會(huì)發(fā)現(xiàn)按照這個(gè)方式去啟用的項(xiàng)目會(huì)有一些問(wèn)題，比如在基礎(chǔ)CSS類添加的步驟中，產(chǎn)生了很多很多的類冗余，畢竟不是每一個(gè)生成出來(lái)的快捷css類開(kāi)發(fā)中都會(huì)使用到，完整的寫(xiě)下來(lái)會(huì)發(fā)現(xiàn)build出來(lái)的css文件特別大，這就是一個(gè)必須要優(yōu)化的點(diǎn)了。再比如說(shuō)，svg圖標(biāo)是否可以進(jìn)行壓縮體積，這也是一個(gè)可以優(yōu)化的點(diǎn)。

去除冗余的css

知道要做什么，網(wǎng)上搜一下大概就會(huì)有答案了，這里我們采用PurgeCSSwebpack插件來(lái)處理冗余的css。這個(gè)插件方便的地方在于，已經(jīng)集成到了vue-cli腳手架中，只需要按照教程來(lái)處理即可，以下是使用vue ui工具來(lái)添加，安裝完畢后即已配置好。

使用vue ui來(lái)安裝purgeCSS插件

壓縮svg

壓縮svg我們當(dāng)然是采用svgo啦，一鍵集成到npm script中，構(gòu)建時(shí)即可進(jìn)行壓縮。關(guān)于svgo的介紹可以看官方文檔，上面的介紹svg icon時(shí)的大佬文章也有介紹，這里就不再過(guò)多描述。

// 安裝
npm i -g svgo
// 運(yùn)行指定目錄your_svg
svgo -f your_svg
// 集成到命令，在package.json中的script寫(xiě)入
"svgo": "svgo -f your_svg"

結(jié)語(yǔ)

經(jīng)過(guò)以上的配置，基本上開(kāi)發(fā)就可以免掉一些前期的工作了，當(dāng)然了還做不到開(kāi)箱即用的程度，比如我們少了移動(dòng)端適配的一些工作，這個(gè)我們留待下期再進(jìn)行展開(kāi)。