vue 一个简单的项目 之一 首页 step 2

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 即可。

退出服务，提交代码即可。