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

Posted 2022-12-06 没刮胡子

问题描述

按照官方文档安装了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>

显示正常了。