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.效果
总结
显示成功！
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Element Plus组件Form表单Table表格二次封装的完整过程
一般在后台管理系统的开发中,都会遇到很多table,但每一次都去引入el-table就会导致代码十分冗余,所以基于组件做一下二次封装成自己需要的组件就十分nice,下面这篇文章主要给大家介绍了关于Element Plus组件Form表单Table表格二次封装的相关资料,需要的朋友可以参考下2022-09-09
下面小编就为大家分享一篇vue项目中引入noVNC远程桌面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vue项目使用electron-builder库打包成桌面程序的过程
这篇文章主要介绍了vue项目使用electron-builder库打包成桌面程序的过程,本文给大家介绍如何使用electron-builder这个库结合实例代码给大家讲解的非常详细,感兴趣的朋友一起看看吧2024-02-02
Vue使用axios post方式将表单中的数据以json格式提交给后端接收操作实例
这篇文章主要介绍了Vue使用axios post方式将表单中的数据以json格式提交给后端接收操作,结合实例形式分析了vue基于axios库post传送表单json格式数据相关操作实现技巧与注意事项,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了详解Vue-cli3.X使用px2rem遇到的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
unplugin-svg-component优雅使用svg图标指南
这篇文章主要为大家介绍了unplugin-svg-component优雅使用svg图标指南，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了使用Vue.js创建一个时间跟踪的单页应用的相关资料,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2016-11-11
这篇文章主要为大家详细介绍了Vue实现步骤条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
elementUI中有日期范围组件,月份范围选择的,就是没有年份范围选择的,需要加一个类似风格的,下面这篇文章主要给大家介绍了关于ElementUI年份范围选择器功能实现的相关资料,需要的朋友可以参考下2023-02-02
这篇文章主要为大家介绍了Vue组件实现景深卡片轮播示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
最新评论