7-2 Iconfont的使用和代码优化

打开iconfont官网

图标库》官方图标库

购物车》添加至项目》下载至本地

下载到桌面，解压

字体文件对我们都有用，iconfont.css也有用，iconfont.js意义就不大了

打开Travel项目，进入src，assets，styles，在sytles目录下创建文件iconfont，把几个字体文件（iconfont.eot,iconfont.svg,iconfont.ttg,iconfont.woff）放到文件夹里，再把iconfont.css放到styles文件夹里

 

打开项目src，assets里styles里iconfont里的iconfont.css文件，

这里它写了一个字体库的引入，现在字体文件并没有在当前的目录下，需要改一下路径

 

最后给了几个class的东西，它的命名都是汉语拼音的命名，而且我们也可以直接通过64或者16进制的码直接来使用这些图标，所以这个东西就可用可不用，就删除掉了。删除掉之后iconfont就可以被使用了。

使用iconfont需要打开main.js,各个页面都需要引入iconfont，不如把iconfont放在这里

 

我需要在Header里面去用这个iconfont，所以打开pages下面的home的components下面的Header.vue

写完这个内容之后，我们需要在里面写一个16进制的串

打开iconfont官网，找返回按钮，有一个复制代码

 

1.先调整一下返回图标

 

2.再调整一下搜索图标

 

1. 再看一下城市这边，向下的箭头有点大，要变小一点

给它一个自己的class  arrow-icon

间距有点大

不该有的缩进，不能有

可能是inline-block造成的两个inline-block或者两个inline元素之间有一个2px间距的问题，可以给父级一个font-size 0，再给每一个子级font-size  .24rem

 

这样header部分的布局就做完了

 

做完这个布局之后，需要做一些代码上的优化

header部分的背景色是一个绿色，那么整个网站的很多地方都会用到这个颜色，那就希望把这个颜色单独放到一个变量里面，然后各处去引用就行了，以后网站主题需要变更，颜色需要切换的时候，只要去改变那个变量，全局都会跟着变，这样的话可维护性会得到非常大的提升

如何去定义变量并在stylus中使用呢

src>assets>styles下创建一个stylus文件variables.styl

在这里我们就可以定义一些变量

如何使用这个变量

样式里面引入样式，不能直接用import，要加一个@

../引入当前目录的上一层

@相当于src目录

能不能通过@来写呢，其实是可以的，但是，如果在css中引入其他的css，想用这个@，前面一定要加一个~

styles目录用的比较多，用的场景比较多，有没有办法给它起一个别名呢，就像@一样

打开build

webpack.base.conf.js