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无法显示内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
相关文章
Claire
2021-05-21
Rabia
2023-07-20
Brigitte
2023-07-20
Abbie
2023-07-20
Yvonne
2023-07-20
Rasine
2023-07-20
Tina
2023-07-20
Kande
2023-07-20
Flower
2023-07-20
Heather
2023-07-20
Tertia
2023-07-20
Fredrica
2023-07-20
Katherine
2023-07-20
Genet
2023-07-20
Orianna
2023-07-20
Ora
2023-07-20
Fern
2023-07-20