Vue项目首页-iconfont的使用和代码优化（7-2）

iconfont的使用和代码优化

1. 将需要的图标放入购物车中，并进入购物车。
   
2. 添加至项目中。
   
3. 下载至本地。
   
4. 先打开iconfont.css，查看需要哪些文件，并将需要的文件放入。
   
5. 因为原本下载的时候引用的话是当前文件夹的引用，如今我修改了文件夹地址。
   
   如果你不喜欢用进制的形式去使用图标，可以把下面那些清除掉。
   
6. 因为我各个组件都需要用到iconfont.css，所以我放到main.js中。
   
7. 我们要引用图标，如何引用？
   
   代码是怎么来的呢？
   
8. 做一些代码上的修改。

<style lang="stylus" scoped>
  @import '../../../assets/styles/varibles.styl'
  .header
    display: flex
    line-height: .86rem
    background: $bgColor
    color: #fff
    .header-left
      width: .64rem
      float: left
      .back-icon
        text-align: center
        font-size: .4rem
    .header-input
      flex: 1
      height: .64rem
      line-height: .64rem
      margin-top: .12rem
      margin-left: .2rem
      padding-left: .2rem
      background: #fff
      border-radius: .1rem
      color: #ccc
    .header-right
      width: 1.24rem
      float: right
      text-align: center
      .arrow-icon
        margin-left: -.04rem
        font-size: .24rem

</style>

1. 又因为，颜色一般的话，我们可以把它放入到一个公共文件中，便于日后维护，我们创建一个后缀为styl的文件。并设置颜色名称。
   

2. 导入文件即可。@import ‘…/…/…/assets/styles/varibles.styl’
   

3. 又因为，我们这样的引用好像不太方便，那么我们修改一下引用前缀，打开webpack.base.conf.js文件。修改增添一个。
   

4. 这个时候要修改引入了。记得在css之间做引入的时候要加~。
   
   同时要修改main.js文件的引入。
   

总结

1. 如何引用iconfont？
2. 如何用styl去定义变量？
3. 如何给引用更便捷。