vue3 Element Plus中icon图标不显示的解决方案
更新时间：2024年03月19日 14:58:17 作者：Y猿某人
这篇文章主要介绍了vue3 Element Plus中icon图标不显示的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
问题描述
在vue组件中使用了Element Plus中icon图标<el-icon>方法想要显示图标
程序能运行但在浏览器中图标无法显示
解决办法
根据Element Plus官方文档给出的教程以及实践操作
解决办法如下：
1.安装
在终端运行下面指令
npm install --save @element-plus/icons
注意：
- Element Plus官方文档给出的指令为npm install
- @element-plus/icons-vue，但运行时终端可能会提供更正确的指令，可以都尝试运行一下看哪个可行
2.在vue文档中写入代码
你想要显示在哪个vue组件文档，就在那个文档写入如下代码：
<script >
//首先是导入图标们，要用哪个就导入哪个
//例如Search就是那个放大镜的图标
import {Search,Edit,Check,Message,Star,Delete,} from "@element-plus/icons";
export default {
//其次是写入components中
components: {
Search,
Edit,
Check,
Message,
Star,
Delete,
}
};
</script>
3.使用
同时在该vue组件文档中插入代码
<el-icon><Search /></el-icon>
4.效果
总结
显示成功！
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在项目中使用ref时有时候直接取值,有时候返回的却是一个数组,不知其中缘由,后查了一下ref用法,在这里给大家分享vue中ref的用法,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要为大家详细介绍了vue component组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
Vue修改iview组件的样式的两种方案(element同)
使用vue必然会用到等iview组件库,但是iview的组件的样式跟自己写的div的样式修改不太一样,所以本文给大家介绍了Vue修改iview组件的样式的两种方案(element同),需要的朋友可以参考下2024-04-04
这篇文章主要介绍了Vue 项目代理设置的优化功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-04-04
这篇文章主要给大家介绍了关于vue3学习笔记之自定义组件的相关资料,组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了ElementUI的CheckBox多选框数据回显方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要为大家详细介绍了vue时间线组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了Vue优化:常见会导致内存泄漏问题及优化详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue3 element-plus如何使用icon图标组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
在本篇文章里小编给大家整理的是一篇关于Vue中的常用指令及用法总结内容，对此有兴趣的朋友们可以跟着学习下。2022-01-01
最新评论