介绍在vuecli中怎么应用阿里巴巴矢量图

1.登录阿里巴巴矢量图库[https://www.iconfont.cn/],如图

2.抉择图标—>增加到购物车

3.增加至我的项目

4.将图标下载至本地

5.解压

6.关上文件 ,删除红框中的两个文件

7.引入

关上vue我的项目所在目录 此处是D:vuetest/src/assets (依据本人我的项目的理论状况写门路)

  • 在 assets文件夹中新建icon文件夹


8.关上文件夹,将上图的文件全副拉进去(选中间接拖进icon文件夹中)

9.应用

  • 进入vscode关上我的项目
  • 进入src—>assets–>icon中能够看到如下


10.点击进入(轻易挑一个展现)如图 (红框局部为图标名字)

11.在html中应用

  • 先上效果图


代码

<p>微信</p>

解析:矢量图用起来没有色彩,我在这里本人给他加上了绿色,还有class记得要用 icon iconfont

//本期的教程到这里就完结啦,是不是很简略!让咱们一起致力走向巅峰!