7.在vue中使用element-ui组件、图标和阿里图标库

最新推荐文章于 2026-02-27 02:01:27 发布
原创 最新推荐文章于 2026-02-27 02:01:27 发布 · 1.7k 阅读 · 5 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
vue项目实战

当前文章被收录于：

vue项目实战
26 篇文章 16 人学习
订阅专栏 查看详情
CSS

当前文章被收录于：

CSS
5 篇文章 0 人学习
订阅专栏 查看详情
本文介绍在Vue项目中如何整合Element-UI组件库和阿里图标库，包括下载、按需导入Element-UI组件，以及在组件中插入Element-UI图标和阿里图标的具体步骤。

在vue中使用element-ui组件和阿里图标库

1.下载element-ui到项目中

项目中已经下载，注意按需导入，这样项目会比较小。

2.参照element-ui官网插入组件

打开element-ui官网，找到对应的组件代码，复制到项目中
在这里插入图片描述
但是因为element-ui插件之前是选择按需导入，虽然性能会更好，但是需要在plugins->element.js中导入后才可以使用。
在这里插入图片描述

3.在组件中插入图标

3.1插入element-ui图标

比如在输入框中插入element-ui图标，可以参照官网，有
在这里插入图片描述
可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
在这里插入图片描述
在这里插入图片描述

3.2插入阿里图标

下载阿里图标到本地，命名为fonts复制到项目的assets目录下，其中demo_index.html为图标示意集合网页。
在这里插入图片描述
在main.js中导入图标库
在这里插入图片描述
用法和element-ui图标一致，但是需要在前方添加iconfont类，表示为阿里图标才能生效。
在这里插入图片描述

标签
#vue #css
vue+element-ui项目引入第三方图标库：阿里巴巴矢量图标库（问题：小方框）
绝圣弃智-零的博客
04-23 6477
因为element-ui内置的小图标非常有限，所以有时候，我们需要自定义或引入第三方图标库。 先介绍下阿里巴巴矢量图标库iconfont： 这个截图只显示了第一行的图标库，还有很多。 也许，我们需要的，这里都有。 有一点比较遗憾的是，不能直接下载图标库，只能一个个的添加入库（放入购物车，不花钱），加入项目（或新建项目并将入库的小图标加入项目），然后配置下载。 配置的主要是项目名称和图...
【ElementUI样式优化】el-input带自定义查询删除图标 ==＞ 图标点击可实现对应功能 ==＞ 一个input实现查询重置功能
Sabrina_cc的博客
08-03 7991
【ElementUI样式优化】el-input带自定义查询删除图标 ==> 图标点击可实现对应功能 ==> 一个input实现查询重置功能 效果概览：修改el-input样式。外层是框框，内层是input和i，实现点击查询图标查询、点击取消按钮清空form的同时 重置查询结果。...
前端小知识：ElementPlus引入阿里图标使用（超详细-手把手教学）
weixin_39651356的博客
12-30 3570
前端小知识：ElementPlus引入阿里图标使用（超详细-手把手教学）
R语言新手也能搞定！WGCNA分析全流程代码详解（附常见报错解决方案）
最新发布
terraform7cloud的博客
02-27 511
本文为R语言新手提供了WGCNA分析的完整代码流程与实战指南。从环境配置、数据准备、软阈值选择、网络构建到模块-表型关联分析，逐步详解核心步骤。重点针对安装依赖、内存不足等常见报错提供了具体解决方案，帮助初学者避开陷阱，顺利完成加权基因共表达网络分析。
Vue在Element-ui项目中如何使用Iconfont(阿里图标库)
JackieDYH的博客
06-24 2368
我们使用element-ui、vue开发网站的时候，往往图标是起着很重要的作用。 下面是vue、element-ui项目，如何使用阿里iconfont图标库的方法。 点击紫色按钮创建项目 image.png 图中画红线的地方很重要 1）、FontClass/Symbol前缀这个很重要，一定不要写成：el-icon-***这样的形式。 如果你写成这样的前缀，会和element-ui框架所带的图标（icon）冲突，导致你图标显示不出来 2）、FontFamily随便起一个名字..
Vue 添加第三方图标(阿里矢量图)
Mr-k的博客
11-26 970
1.阿里矢量图官网，创建项目阿里矢量图 2.创建项目后，前缀这里在配置中需要用到，注意 3.选择需要下载的矢量图标，选择Font class，下载到本地 4.解压后获得以下文件 5.到Vue项目下，找个地方存放以上所有文件，直接复制粘贴即可 6.打开iconfont.css文件，对其进行一些配置，这里的icon就是你项目当时配的后前缀！！ [class^="icon"], [class*...
vue element-ui的图标选择组件vue-fontawesome-elementui-icon-picker
Zero
11-17 1707
效果图 1. 安装 cnpm install vue-fontawesome-elementui-icon-picker 2.在main.js全局注册 import iconPicker from 'vue-fontawesome-elementui-icon-picker' // elementui图标库 Vue.use(iconPicker) 3.template代码 <el-form-item label="菜单图标:" prop="icon" class="default-f
【Vue】在项目中使用阿里图标库
qq_45677671的博客
02-01 2394
在 vue 项目中使用阿里图标库，包括 element-ui 和 ant-design-vue 组件库用法
Vue、Element-ui项目中使用Iconfont(阿里图标库)
LONGLONGAGO_RU的博客
10-25 873
阿里图标库地址：https://www.iconfont.cn 方法一，阿里文档地址https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code 方法二：引用 1， 先注册，再登录、找到图标管理、我的项目 2，创建项目 3， 创建项目 1）、FontClass/Symb...
vue中 使用element-ui 图标和阿里字体图标结合使用
wqnmlgbsz的博客
09-24 862
vue中 使用element-ui 图标和阿里字体图标结合使用 1 登录阿里字体图标官网 2 图标管理 --> 我的项目 --> 创建一个项目 3 开始搜有想要的图标添加到我的项目中 4 下载到本地 5 解压，拷贝到src/asserts/icon下 . ├── demo.css ├── demo_fontclass.html ├── demo_symbol.html ├── demo_unicode.html ├── iconfont.css ├── iconfon.
Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
JSN___的博客
12-30 702
Vue、Element-ui项目中如何使用Iconfont(阿里图标库) 我们使用element-ui、vue开发网站的时候，往往图标是起着很重要的作用。 1.笨拙式引用： 准备工作 先注册，再登录、找到图标管理、我的项目 点紫色的这个创建自己的项目 图中画红线的地方很重要 1）、FontClass/Symbol前缀这个很重要，一定不要写成：el-icon-***这样的形式。 如果你写成这样的前缀，会和element-ui框架所带的图标（icon）冲突，导致你图
Vue3+Element-Plus 登录组件添加字体图标实现 九
build2024
11-10 4034
3.3 添加字体图标 1.按照页面效果，还需要给输入框添加两个图标。 2. 打开官网，通过属性的方式添加Icon组件 | Element 3.复制粘贴代码 4.运行效果 5.替换成自己想要的图标，可以直接在官网查找到自己需要的图标替换即可组件 | Element 6.假如，官网中没有自己想要的图标。我们可以引入第三方图标库。假如打开阿里巴巴图标库iconfont-阿里巴巴矢量图标库 先注册一个账户，搜索自己的图标，下载 7.找到自己想要的图标，加入购物车...
Vue项目中使用element-ui，并引入第三方图标库iconfont
热门推荐
sleepwalker_1992的专栏
09-23 2万+
element-ui官网 1、安装 npm install element-ui --save-dev 2、在main.js文件中引入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 3、上面两步完成后，就可以在项目任意的组件中...
vue3+element plus封装自定义图标选择器(带图标搜索功能)
m0_53582519的博客
05-25 7138
vue3+element plus封装自定义图标选择器
vue3.x结合element-plus如何使用icon图标
dedede001的博客
11-16 5580
基于 Vue 3的Element Plus如何使用icon图标
vue3项目引入第三方图标（阿里图标）
kanno的博客
03-01 1803
vue3项目引入第三方图标（阿里图标）
vue3+TS 项目引入element plus 组件库，图标库 使用
xhc6666的博客
01-07 2254
vue3+TS 项目引入element plus 组件库，图标库 使用
新版element-plus图标全局导入及在input标签内部插入图标
qq_41961383的博客
04-27 3685
新版element-plus图标全局导入 首先安装新版图标库 npm install @element-plus/icons-vue 其次在全局配置main.js里面添加以下代码 // 统一导入el-icon图标 import * as ElIconModules from '@element-plus/icons-vue' const app=createApp(App) // 统一注册el-icon图标 for(let iconName in ElIconModules){ app.compo
【vue】图标选择（elementUI和svg结合）
Qxn530的博客
03-02 4958
在做菜单权限的时候需要选择图标，如果既想要用elementUI自带的图标，还想要自定义的图标，这时就需要二者结合一下
Palantir解密：“本体”的建模逻辑及其扩展方向
SZSDQJC的博客
09-10 2584
上一篇重点从对现实世界建模的角度探讨了“本体”在数字化架构中的核心意义。这里借Palantir的“本体”概念、解析Palantir只是起点，目标旨在以他山之石攻玉——探索数字世界的底层架构逻辑，最终为构建自主体系提供思考。Palantir以“本体论”为核心的建模方案是否代表终极答案，不宜过早下结论，但其思路值得深入剖析。
实现大疆的热红外影像照片转换成实际温度值的tiff影像，可以在pix4D中合成+源码+文档说明（毕业设计）
实现大疆的热红外影像照片转换成实际温度值的tiff影像，可以在pix4D中合成+源码+文档说明（毕业设计），该项目是个人毕设项目，答辩评审分达到99分，代码都经过调试测试，确保可以运行！欢迎下载使用，可用于小白学习、进阶。该资源主要针对计算机、通信、人工智能、自动化等相关专业的学生、老师或从业者下载使用，亦可作为期末课程设计、课程大作业、毕业设计等。项目整体具有较高的学习借鉴价值！基础能力强的可以在此基础上修改调整，以实现不同的功能。实现大疆的热红外影像照片转换成实际温度值的tiff影像，可以在pix4D中合成+源码+文档说明（毕业设计）实现大疆的热红外影像照片转换成实际温度值的tiff影像，可以在pix4D中合成+源码+文档说明（毕业设计）实现大疆的热红外影像照片转换成实际温度值的tiff影像，可以在pix4D中合成+源码+文档说明（毕业设计）实现大疆的热红外影像照片转换成实际温度值的tiff影像，可以在pix4D中合成+源码+文档说明（毕业设计）实现大疆的热红外影像照片转换成实际温度值的tiff影像，可以在pix4D中合成+源码+文档说明（毕业设计）实现大疆的热红外影像照片转换成实际温度值的tiff影像，可以在pix4D中合成+源码+文档说明（毕业设计）实现大疆的热红外影像照片转换成实际温度值的tiff影像，可以在pix4D中合成+源码+文档说明（毕业设计）实现大疆的热红外影像照片转换成实际温度值的tiff影像，可以在pix4D中合成+源码+文档说明（毕业设计）实现大疆的热红外影像照片转换成实际温度值的tiff影像，可以在pix4D中合成+源码+文档说明（毕业设计）实现大疆的热红外影像照片转换成实际温度值的tiff影像，可以在pix4D中合成+源码+文档说明（毕业设计）实现大疆的热红外影像照片转换成实际温度值的tiff影像，可以在pix4D中合成+源码+文档说明（毕
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sheldon一蓑烟雨任平生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值