iconfont 的使用與程式碼優化

在iconfont 上把想要的圖示新增到購物車後，再新增到專案。然後在專案中下載到本地。如下圖。

下載，解壓後，有以下檔案

我們在 src/assets/styles 下面，建立目錄 iconfont, 然後將四個字型檔案放進去

然後，將 iconfont.css 放入style 目錄下. 要改一下，iconfont.css 裡面的路徑，如下。（第3，4，6，7行）

引入 iconfont.css , 因為很多頁面要使用，因此，在mian.js 裡面引入

整個Header.vue 程式碼

以上程式碼的優化。

優化一 通用的style的提取

注意，.header 中 background 顏色，最好設定為變數，儲存起來，這樣顏色風格，也比較好修改維護。

在style 目錄下新建一個檔案 variables.styl

在 Header.vue 中使用的方式

優化二 路徑

注意上圖 .styl 的串特別長

直接使用“～@” 表示src 目錄【css 中可以這個】

優化三 給常用路徑一個名字

就像‘@’ 代表src 一樣，可以為一個常用路徑 附一個名字

在build 目錄下 webpack.base.conf 檔案中，可見（第38行）

然後可以給它加一行：

那麼，就可以去Header.vue 和 main.js 簡化一部分程式碼了。【第7，8，9行】【第24行】

當然，修改了build 中檔案後，要重啟下服務。使用命令 npm run start 即可。

退出服務，提交程式碼即可。