字體圖標可以從阿里巴巴的矢量圖標庫里下載:
https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4&type=1
比方說我需要一個搜索圖標，可以把其先添加到購物車
在項目里可以把添加過去的icon下載下來
下載下來的壓縮包解壓出來有這么多文件:
其中有用的就這一些：
打開VUE工程的\src\assets\styles目錄（具體目錄各個項目可能不同，總之放在和樣式有關的下面就對啦）
新建一個iconfont文件夾保存全部的字體圖標,把iconfont.css單獨拿出來和其他css放到一起
打開iconfont.css文件，把這個文件引用的字體圖標文件路徑修改正確，data前綴的不用改
在main.js里引入這個css,在之前我也引入了fastclick解決移動端點擊事件(需要事先cnpm install fastclick --save)，reset.css,border.css具體做什么用的下圖注釋里寫明了
然后在組件里面需要使用字體圖標的元素上面加上iconfont類名
把復制出來的代碼直接粘貼到元素中就行啦，當然也可以使用前面css自動生成出來的class類名
到此為止字體圖標的使用基本就結束了
接下來使用stylus快速編寫樣式代碼，和使用less，scass差不多，可以在存放css的文件夾新建一個global.styl文件,用於存儲一些公共的變量
引用一下這個文件,注意一下stylus的樣式嵌套是不用加中括號和冒號分號的，之前寫less寫習慣了才加上去的
在這里reset.css里吧font-size定義成了50px，所以如果設計稿是750px的寬度的話直接把設計稿上的寬度/100加上rem就是適合的單位啦
因為header.vue組件在main.js里被引用，所以引用stylus的路徑可以這樣改寫
由於這個路徑經常用到，所以可以在webpack,base,config.js中將其保存起來
對webpack的修改都需要重啟服務器，否則會報錯，這里需要注意
有了這個變量就可以直接在需要這個路徑的地方做修改了
修改如下：
如下
到這里一個頭部搜索的組件就做完了
