vue使用阿里云矢量图

在vue中虽然使用了elementui中的图标，但是会发现图标数量有限，不能够适（zhuang）用（bi）系统，因此在vue中使用阿里云矢量图。

添加矢量图到“购物车”

浏览器访问阿里云矢量图 https://www.iconfont.cn/ 地址，并登录，搜索需要的矢量图，并添加到“购物车”

查看“购物车”已添加矢量图并下载到本地

已添加的图标均在“购物车”中，点击查看已添加矢量图，点击“下载代码”，将矢量图代码下载到本地，下载到本地的是一个download.zip 文件

解压并拷贝文件到项目

解压download.zip，进入目录并拷贝所有文件，进入vue项目中，路径为：xx项目/src/assets/，自定义一个存放矢量图文件的文件夹，如：iconfont，将刚拷贝的所有文件复制到iconfont文件夹下

vue全局引用

打开vue项目中的main.js，在全局引用阿里云矢量图，路径与assets文件夹下创建的文件夹名称有关

文件中使用

到此，在文件中即可使用阿里云矢量图

备注：如果不知道类名，可以查看iconfont.css中的类名，即为文件中使用的类名

要想生活更美丽，工作还得更努力！

vue使用阿里云矢量图相关推荐

uni-app（一）----引入阿里云矢量图标库
这段时间因为老师要求,要做一个小程序,所以开始学一下uni-app开发,以后我会把我学的东西都发出来.现在写一下关于引入阿里云矢量图标库的方法添加图标首先去官网选择你喜欢的图标你可以在这搜索你想 ...
vue用阿里云oss上传图片使用分片上传只能上传100kb以内的解决办法
首先,vue和阿里云oss上传图片结合参考了这位朋友的 https://www.jianshu.com/p/645f63745abd 文章,成功的解决了我用阿里云oss上传图片前的一头雾水. 该大神 ...
uniapp如何引入阿里云矢量图标库
最近搞了下uniapp的开发,写一下关于引入阿里云矢量图标库的方法: 首先说下我走过的坑吧,我直接把图标zip包下下来放在static里面,在App.vue的style中引入,保存,后面查了下,微信小 ...
vue使用阿里云视频点播
vue使用阿里云视频点播--videoId + playauth的方式一. 上传视频官方文档https://help.aliyun.com/document_detail/52204.htm?sp ...
OSS（阿里云）图床搭建
OSS(阿里云)图床搭建 OSS(阿里云)图床搭建 OSS设置建立一个Bucket 获取ID和密钥值下载和配置PicGo 下载配置阿里云测试Typroa使用图床配置信息测试错误排查 OS ...
阿里云OSS图床搭建方法
由于现在一直在CSDN和自己的网站同步写博客记录,可是以前我都是在CSDN编辑器内直接码字上传,但这样的编辑方式很难受,我还是更喜欢像Typora的本地markdown编辑器,这样就需要有一个自己的图 ...
vue调用阿里云无痕验证
vue调用阿里云无痕验证在调用阿里云无痕验证时有个先决条件需要全局变量先定义才能去加载js set_ALY_config () {var _this = thisreturn new Promise ...
vue集成Highcharts 云词图
vue集成Highcharts 云词图最近接手一个需求,需要服务端统计词语,前端出一个云图. 记得很早之前在echarts看到过一个云词图,去翻一下echarts官网没翻到索性去Highcharts ...
iPic 添加阿里云OSS图床
前言 0x01 iPic介绍某天发现ipic用的好好的,结果图片无法加载了..... 猜测可能是微博的图床挂了... 0x02 阿里云OSS配置 01 这里就尝试使用阿里云的图床试试进入阿 ...

vue使用阿里云矢量图

vue使用阿里云矢量图

添加矢量图到“购物车”

查看“购物车”已添加矢量图并下载到本地

解压并拷贝文件到项目

vue全局引用

文件中使用

vue使用阿里云矢量图相关推荐

最新文章

热门文章