文章目录
前言一、安装二、使用1.引入需要的图标2.页面效果3.还有一个奇怪的问题 总结前言
用vue3开发的时候，使用element-plus UI组件库的时候，发现不能像之前vue2时候使用的那么方便了，需要单独引入和使用，且使用的方式发生了很大的变化，这篇文章将详细的为你说明element-plus icon组件库的使用方法。
一、安装
第一种，使用包管理工具：
$ npm install @element-plus/icons-vue
$ yarn add @element-plus/icons-vue
$ pnpm install @element-plus/icons-vue
第二种，使用vue-vli 脚手架使用可视化面板进行添加：
二、使用
1.引入需要的图标
后台有一个需要对用户进行用户管理的功能，为美化页面，在菜单栏需要引入图标
代码如下（template部分）：
<el-menu :router="true" default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse"@open="handleOpen"@close="handleClose"><el-submenu index="1"><template #title><el-icon><UserFilled />// 添加一个代表用户的图标</el-icon><span>用户管理</span></template><el-menu-item index="/users"> 用户列表 </el-menu-item></el-submenu></el-menu>
代码如下（script部分）：
<script>import {UserFilled} from '@element-plus/icons-vue'// 使用的时候需要单独引入这个图标从库里export default {components: {UserFilled// 单独声明这个},setup() {// 后面都省略了
如果按照官网中提供的方法，页面并没有成功加载出图标：
所以还需要再声明一下（哎，迭代迭的越来越花里胡哨）
2.页面效果
就成功引入到我们的页面上了！
反观vue2使用element UI组件库的时候好像使用并没有那么复杂并没有，不管是全局导入或者是按需导入（好像不需要单独引入）都可以直接拿直接用就挺方便的
就比如说这样，按钮里直接加上就可以使用了
<el-button type="primary" icon="el-icon-search">搜索</el-button>
3.还有一个奇怪的问题
实际在vue3开发中，像input框上加图标的时候，使用之前的那种用法也是可以的（且在HBuilderX中还存在提示），这种可以参考着element UI组件库看看，而element-plus ui组件库的图标不能直接进行使用（需要先导入整个包，再单独进行使用），这就是我觉得很奇怪的一个点。
总结
初尝试element-plus ui组件库的小伙伴可以看看我其他的文章，这都是我这段时间踩的坑
Vue如何实现不同登录方式的切换（账号密码登录、邮箱验证登录等）
关于element-plus 中侧边菜单栏的使用中的一个不经意的小问题（避坑）
