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 即可。
退出服务,提交代码即可。