Vue项目首页_iconfont的使用和代码优化

  选择大麦官方图标库

添加需要的图标进购物车：

解压缩后：

在styles目录下新建文件夹iconfont，把四个字体文件添加进iconfont文件夹：

将iconfont.css文件加入styles文件夹中：

修改iconfont.css文件中的引入路径：

在main.js中引入iconfont.css：

import './assets/styles/iconfont.css'

复制icon 代码：

效果：

把公共的样式抽离出来：

1. 在styles目录下新建varibles.styl文件：

$bgColor = #00bcd4

2. 在Header.vue中：

这样修改varibles.styl中的值：

页面就会发生变化：

优化：

@代表src目录，在style中引入src目录为‘~@’

可以将styles目录起一个别名：

打开build下的webpack.base.conf.js:

在Header.vue中可以这样引用：

注意：修改了webpack的配置项需要重启项目