vue开发一、在Vue中引入ElementUI二、在Vue中使用阿里图标库

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 2.9k累计阅读 3k平均单平台已同步平台 CSDN 微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄4年

关注

VIP免费原创最新推荐文章于 2026-02-24 01:20:33 发布 2.9k 阅读 AI 写同款· GEO 优化 ›

一、在Vue中引入ElementUI

ElementUI是一种基于Vue的第三方UI库，提供了许多常用的UI组件，如按钮、表单、弹窗等等。以下是在Vue项目中引入ElementUI的步骤：

1. 安装ElementUI

在终端中执行以下命令来安装ElementUI：

npm install element-ui -S

2. 引入ElementUI

在Vue项目的入口文件main.js中，引入ElementUI并使用它：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

这里我们使用了Vue的插件机制，通过Vue.use(ElementUI)来安装ElementUI插件。

3. 使用ElementUI组件

在Vue组件中，我们可以像下面这样使用ElementUI组件：

<template>
  <div>
    <el-button type="primary">按钮</el-button>
    <el-input placeholder="请输入内容"

最低0.47元/天解锁文章

收录于

当前文章被以下社区和专栏收录：

标签

#vue.js #elementui #前端

定制化图标——Element UI 组件图标替换指南本篇博客将介绍如何在使用 Element UI 组件时对原生图标进行定制化替换，提供了适用于满足个性化需求的方法和技巧。阅读详情

相关推荐

drawio使用阿里云矢量图标库进行流程图、泳道图、UML、BPMN、架构图、部署图、原型图、用户故事图等绘制

drawio使用阿里云矢量图标库可进行流程图、泳道图、UML、BPMN、架构图、部署图、原型图、用户故事图、ER图等软件开发设计及架构图的绘制，导出无水印，操作便捷，是替代Visio及Processon等的不二选择。下载对应的资源，开启draw.io应用软件，从菜单依次点击"File"->"Open Libary…"选择对应的xml文件（3D压缩包需先解压缩），即可在draw.io中载入阿里云矢量图标库。

寻找未来的世界 7119

Element UI中的图标

1、vue是现今比较流行的前端框架了，目前，使用比较多的就是Element UI，为了页面的美观程度，我们每个前端页面大多都会使用一下图标，下面介绍一下图标的使用。如有需要，可参考官网: 2、举个简单的例子，我们编写一个input框，在框后端添加一个搜索的图标，代码如下所示： <el-form :inline="true"> <el-form-item label="城市 :"> <el-input type="t

taibaishenlong的专栏 2万+

Vue和Element UI项目搭建

一、项目搭建1.创建一个SPA项目2.安装 Element-UI3.导入组件4.创建登陆注册界面登录组件---Login.vue注册组件---Register.vue定义组件与路由的对应关系效果演示：二、前后端数据交互1.安装axios2.导入api模块，添加axios的全局配置3.修改main.js配置vue-axios4.数据表数据5.编写后端登录注册controller层6.使用封装后的axios发送请求7.测试可观看下面这篇博文Vue安装并使用Vue-CLI构建SPA项目并实现路由-CSDN博客创

YQCC1的博客 2264

如何在Vue+ElementUI项目中使用iconfont图标库

iconfont官网iconfont中有许多样式的图标可以给我们使用。什么是SVG格式？SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。

weixin_46073538的博客 7407

vue+element-ui项目引入第三方图标库：阿里巴巴矢量图标库（问题：小方框）

因为element-ui内置的小图标非常有限，所以有时候，我们需要自定义或引入第三方图标库。先介绍下阿里巴巴矢量图标库iconfont：这个截图只显示了第一行的图标库，还有很多。也许，我们需要的，这里都有。有一点比较遗憾的是，不能直接下载图标库，只能一个个的添加入库（放入购物车，不花钱），加入项目（或新建项目并将入库的小图标加入项目），然后配置下载。配置的主要是项目名称和图...

绝圣弃智-零的博客 6484

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

在vue中使用element-ui组件和阿里图标库1.下载element-ui到项目中2.参照element-ui官网插入组件3.在组件中插入图标3.1插入element-ui图标3.2插入阿里图标 1.下载element-ui到项目中项目中已经下载，注意按需导入，这样项目会比较小。 2.参照element-ui官网插入组件打开element-ui官网，找到对应的组件代码，复制到项目中但是因为element-ui插件之前是选择按需导入，虽然性能会更好，但是需要在plugins->element

qq_39055970的博客 1788

Vue + Element UI 前端篇（十一）：第三方图标库

用过Elment的同鞋都知道，Element UI提供的字体图符少之又少，实在是不够用啊，幸好现在有不少丰富的第三方图标库可用，引入也不会很麻烦。Font Awesome 5 跟之前的版本使用方式差别较大，功能是强大了，图标也更丰富了，但使用也变得更加复杂了。进入图标库选择自己喜欢的图标加入购物车，因为没有批量加入，一个个点简直要命，在控制台输入以下命令可以批量添加。本人还是比较喜欢之前的使用方式，安装容易，使用简单，毕竟我的需求也没那么复杂，只是简单的有图标可用就行了。

y19910825的博客 2322

【前端】vue + elementUI使用第三方图标库方法

文章转载自： vue+element-ui项目内使用阿里图标库 1. 添加图标首先,找到阿里图标库网址： iconfont 进入到我的项目新建项目：新建项目后往购物车内添加图标，将你需要的添加完成后，打开购物车将其添加到项目，选中项目，确认即可。就可以看你添加的2个图标，然后点击下载到本地： 2. 使用图标下载文件里面文件很多，但是主要用到的就这几个文件，其他的删了就行，留下几个新建fonts文件夹，将这几个文件添加进fonts文件夹。 2.1 添加f

四通一达小星星的博客 586

Vue中使用ElementUI使用第三方图标库iconfont

1.在http://www.iconfont.cn/阿里巴巴图标库添加图标到自己项目中，然后点击更多项目中的编辑项目 2.修改前缀为el-icon-xxx，xxx自定义然后，将项目下载自本地 3.将这5个文件放入到项目文件中，将iconfont.css引入到Vue项目中，然后修改iconfont.css的.iconfont处，将其修改为下图所示 4.修改iconf

无双孟堂的博客 4万+

vue项目中使用ElementUI与第三方图标库Iconfont（亲测有效）

本次需求是要使用elementUI中的<el-input>，并在输入框头部添加图标，无奈element-ui的图标太少，没有用户、密码等这些图标，因此不得不使用第三方的图标，这里选择使用阿里的Iconfont，很全，也很简单使用。如果只是使用一两个数量较少的图标，完全可以将图标下载下来，然后自行引用，不过不适用于动态变更的项目（不然每次都要下载，很麻烦）。 iconfont使用就...

romeo12334的博客 4280

Vue：ElementUI怎么引入外部svg图标

推荐阿里巴巴图标库 命令行运行npm install svg-sprite-loader 创建icons/svg文件夹将svg文件放在该文件夹厦门在components文件夹中创建svgiconfont.vue文件文件内容： <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> &lt

xuxuan1997的博客 1万+

Element-UI项目如何高效集成阿里矢量图标库

本文详细介绍了在Element-UI项目中高效集成阿里矢量图标库的完整方案。针对Element-UI自带图标数量有限的痛点，推荐使用Font class方式实现无缝集成，并提供了从图标挑选、项目配置、本地引入到在Vue组件中使用的全流程实战指南，助力开发者快速扩展项目图标资源，提升界面个性化与开发效率。

t1u2v的博客 785

elementui icon图标大全

基本用法 Element内置丰富的图标库，主要有以下2种用法：设置类名el-icon-xxx，通常使用i元素在Element部分组件中设置icon属性页面效果以下是通过上述两种用法制作的简单导航工具条：在这里插入图片描述参考文献 https://element.eleme.cn/#/zh-CN/component/icon 实例 <template> <el-...

qq_28875189的博客 4万+

element-ui使用阿里矢量图标

其实我们在工作中，很多时候ui给我们的图标可能就是从阿里图标库中拿来的如果你用elemnt-ui写项目的时候如果要用到很多图标 <el-button type="primary" icon="el-icon-search">搜索</el-button> <i class="el-icon-edit"></i> <i class...

业余前端的职业经历 5546

【Vue】 element ui 引入第三方图标

一·背景最近一个项目用到 vue 和 element ui开发前端。感觉方式引入png图标比较鸡肋，所以决定把图标整合到element ui。截止目前为止国内外网络上的的相关教程没超过5篇，而且都不详细，即使全部阅读后总结也不能正常引入第三方图标，所以决定写一篇引入引入第三方图标的教程。二· 1·基于阿里巴巴矢量图标库的一篇教程，地址;http://www.iconfont.cn/ 2

而浮生若梦，为欢几何 5万+

ElementUI使用第三方图标库Iconfont

1、http://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.2 进入阿里巴巴图标库2、将所需图标加入购物车，打开购物车选择3、打开我的项目，选择4、打开‘编辑项目’，修改图标前缀，避免与ElementUI图标命名发生冲突6、选择“下载到本地”，修改[class^="el-icon-erp"], [class*="...

sou_vyp的博客 1万+

Vue项目中本地引用Iconfont(阿里巴巴图标库)-svg图标样式使用 & element UI和ant design皆可

Vue项目中本地引用Iconfont(阿里巴巴图标库)-svg图标样式使用 & element UI和ant design皆可下载图标先进入iconfont.cn页面 iconfont官网：https://www.iconfont.cn/ 方法见上使用一准备工作 1、先注册，再登录、找到图标管理、我的项目 2、点紫色的这个创建自己的项目新建项目界面如下 3、图中画蓝线的地方很重要 1）、FontClass/Symbol前缀这个很重要，一定不要写成：el-icon-***这样的形式