超全,看这一篇就够啦!vue中下载和在线不同方式使用阿里巴巴普通及彩色矢量图标
最近在封装一个全局提示框,使用UI库自带的icon会有报错,没有解决,最后下载了阿里巴巴矢量图来代替,总结一下使用过程写在这里~
先做最基础的准备工作~
1.新建一个项目(名字随意哦)
2.将自己需要的图标加入购物车
3.将购物车中的图标添加到刚才新建的项目中
到这里准备工作就做完啦!!到资源管理-我的项目中看看吧!!!
一、普通无色彩的图标
1)下载使用
1.下载后将本地的文件放在你的vue项目中(这里我把demo开头的去掉了)
2.在main.js中引入iconfont.css
3.使用(前边必须要加上iconfont)
iconfont后面的是你下载图标的名字
2)在线使用
1.点击复制这个在线链接
2.在你的vue项目中新建一个css文件,并在文件中引入刚才的链接
3.在main.js中引入这个文件
OK,可以使用啦,还是上面的使用方式~
二、使用彩色图标
彩色图标的使用方式和上面的下载和在线两种方式差不多,有稍微的变化,先说使用方式
需要这样的方式去写哦~
另外 需要在vue.app中加入此样式
上面这俩是这两种方式都需要的,下面开始讲下载和在线两种方式的区别啦!!!!!
1.下载使用
main.js不仅要进入css还需要再引入js文件
2.在线使用
在线使用方式也是同样需要再main.js中多引入一个js文件
到这里就大功告成啦,赶紧试试吧
注:原创文章 转载请表明出处,笔芯,biu~