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

需要注意的是,文件配置完成后需要重启我们的项目哦.