vue去哪網項目開發三之首頁header區域中iconfont的使用以及代碼的優化

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

需要注意的是,文件配置完成后需要重啟我們的項目哦.
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容