Vue3中使用Element Plus时el-icon无法显示的问题解决

更新时间：2022年03月31日 11:40:17 作者：没刮胡子

我们的Vue前端一般都是用的ElementUI,其中按钮可能用到的比较多,官方里面有自带的一些默认图标,下面这篇文章主要给大家介绍了关于Vue3中使用Element Plus时el-icon无法显示的问题解决,需要的朋友可以参考下

问题描述

按照官方文档安装了icons

$ npm install @element-plus/icons

然后在页面中使用

<template>
  <!-- <Header /> -->
  <!-- Icon 图标 -->
  <el-icon><edit /></el-icon>
  <el-icon><fold /></el-icon>
  <el-icon><aim /></el-icon>
  <!-- SVG 图标 -->
  <edit style="width: 1em; height: 1em; margin-right: 8px" />
  <share style="width: 1em; height: 1em; margin-right: 8px" />
  <delete style="width: 1em; height: 1em; margin-right: 8px" />
  <search style="width: 1em; height: 1em; margin-right: 8px" />
</template>

无法显示：

runtime-core.esm-bundler.js?5c40:6584

[Vue warn]: Failed to resolve component: edit
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > >
at <RouterView>
at <App>

解决方案

添加引用

<script>
//组件script
import { Fold } from "@element-plus/icons";
import { Edit } from "@element-plus/icons";
import { Aim } from "@element-plus/icons";
import { Share } from "@element-plus/icons";
import { Search } from "@element-plus/icons";
import { Delete } from "@element-plus/icons";
export default {
  components: {
    Fold,
    Edit,
    Aim,
    Share,
    Search,
    Delete,
  },
  data() {
    return {
    };
  },
};
</script>

显示正常了。

总结

到此这篇关于Vue3中使用Element Plus时el-icon无法显示问题解决的文章就介绍到这了,更多相关Vue3中el-icon无法显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Element Plus的el-icon怎么用

vue element table 表格请求后台排序的方法
今天小编就为大家分享一篇vue element table 表格请求后台排序的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue混入mixin流程与优缺点详解
混入(mixin)提供了一种非常灵活的方式，来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项
2022-09-09
vue video和vue-video-player实现视频铺满教程
这篇文章主要介绍了vue video和vue-video-player实现视频铺满教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
Vue.js路由实现选项卡简单实例
这篇文章主要为大家详细介绍了Vue.js路由实现选项卡简单实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
Vue加入购物车判断token添加登录提示功能
加入购物车，是一个登录后的用户才能进行的操作，所以需要进行鉴权判断，判断用户token是否存在，这篇文章主要介绍了Vue加入购物车判断token添加登录提示,需要的朋友可以参考下
2023-11-11
Vue如何监测数组类型数据发生改变的(推荐)
这篇文章主要介绍了Vue如何监测数组类型数据发生改变的,本文通过实例代码图文详解给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-11-11
vue 解决数组赋值无法渲染在页面的问题
今天小编就为大家分享一篇vue 解决数组赋值无法渲染在页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
vue自定义权限标签详细代码示例
这篇文章主要给大家介绍了关于vue自定义权限标签的相关资料,在Vue中你可以通过创建自定义组件来实现自定义标签组件,文中给出了详细的代码示例,需要的朋友可以参考下
2023-09-09
vue.js基于ElementUI封装了CRUD的弹框组件
这篇文章主要介绍了vue.js基于ElementUI封装了CRUD的弹框组件，问咋会给你围绕主题展开详细的内容介绍，感兴趣的小伙伴可以参考一下
2022-07-07
vue 父组件通过$refs获取子组件的值和方法详解
今天小编就为大家分享一篇vue 父组件通过$refs获取子组件的值和方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11