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. 如何给引用更便捷。
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页