介绍在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
//本期的教程到这里就完结啦,是不是很简略!让咱们一起致力走向巅峰!