1:頁面中引入iconfont圖標字體
首先需要我們去阿里圖標網站選擇我們所需要的字體圖標,下載到我們本地,然后添加到我們的頁面上,添加到頁面上的具體路徑如下:
icon圖標在頁面上的路徑.png
2:我們將圖標放到我們的項目中之后,現在我們來在頁面上引入我們的字體圖標,我們知道main.js是我們項目的入口文件,所以我們在main.js中引入我們的css樣式
main.js中引入圖標字體樣式.png
這里需要注意的是,由于我們修改了圖標字體的存放的路徑,所以我們需要在iconfont.css中修改圖標字體的src路徑
修改圖標字體的引入的路徑.png
好了,以上我們就正確引入了字體圖標,可以在頁面上使用了.
3:下面是關于我們代碼的優化:
4:優化css
main.js中引入圖標字體樣式.png
關于定義css變量,以及文件的引入.png
5:我們知道@表示的是src,其實在文件中我們就可以這樣寫@/assets/styles
那么我們頁面上好多地方都有用的styles,我們如果都這樣寫太長了,所以我們可以在build文件夾下的webpack.base.sonf.js文件下配置像@符合代表src一樣的變量,具體如下圖
定義類似@符號的變量.png
引入.png
需要注意的是,文件配置完成后需要重啟我們的項目哦.