Vue3中使用Element?Plus時el-icon無法顯示的問題解決
問題描述
按照官方文檔安裝了icons
$ npm install @element-plus/icons
然后在頁面中使用
<template> <!-- <Header /> --> <!-- Icon 圖標(biāo) --> <el-icon><edit /></el-icon> <el-icon><fold /></el-icon> <el-icon><aim /></el-icon> <!-- SVG 圖標(biāo) --> <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>
顯示正常了。
總結(jié)
到此這篇關(guān)于Vue3中使用Element Plus時el-icon無法顯示問題解決的文章就介紹到這了,更多相關(guān)Vue3中el-icon無法顯示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue video和vue-video-player實(shí)現(xiàn)視頻鋪滿教程
這篇文章主要介紹了vue video和vue-video-player實(shí)現(xiàn)視頻鋪滿教程,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10Vue.js路由實(shí)現(xiàn)選項(xiàng)卡簡單實(shí)例
這篇文章主要為大家詳細(xì)介紹了Vue.js路由實(shí)現(xiàn)選項(xiàng)卡簡單實(shí)例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-07-07Vue如何監(jiān)測數(shù)組類型數(shù)據(jù)發(fā)生改變的(推薦)
這篇文章主要介紹了Vue如何監(jiān)測數(shù)組類型數(shù)據(jù)發(fā)生改變的,本文通過實(shí)例代碼圖文詳解給大家講解的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-11-11vue自定義權(quán)限標(biāo)簽詳細(xì)代碼示例
這篇文章主要給大家介紹了關(guān)于vue自定義權(quán)限標(biāo)簽的相關(guān)資料,在Vue中你可以通過創(chuàng)建自定義組件來實(shí)現(xiàn)自定義標(biāo)簽組件,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09