超全，看这一篇就够啦！vue中下载和在线不同方式使用阿里巴巴普通及彩色矢量图标

超全，看这一篇就够啦！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～