vue3無(wú)法顯示element-plus問題及解決
vue3無(wú)法顯示element-plus
原本想使用el-tree做目錄，結(jié)果找了很久的原因都無(wú)法顯示，并且沒有任何報(bào)錯(cuò)，但是在調(diào)試的過程中發(fā)現(xiàn)el-tree使用的數(shù)據(jù)是對(duì)象形式的
并且還報(bào)了el-tree組件無(wú)法解析
runtime-core.esm-bundler.js:38 [Vue warn]: Failed to resolve component: el-tree If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
剛開始以為需要解析數(shù)據(jù)，但是其他人都可以正常使用，所以嘗試放其他組件，結(jié)果其他組件也都無(wú)法使用，那么很有可能是掛載出現(xiàn)問題
因?yàn)閷⑺行枰獟燧d使用的變量放在了一個(gè)use里導(dǎo)致的，還是得多熟悉才行
正確使用方法
vue3使用Element-plus的圖標(biāo)
首先安裝Element-Plus-icon
# 選擇一個(gè)你喜歡的包管理器 # NPM $ npm install @element-plus/icons-vue # Yarn $ yarn add @element-plus/icons-vue # pnpm $ pnpm install @element-plus/icons-vue
如何使用
Element-Plus-icon官方文檔鏈接
https://element-plus.org/zh-CN/component/icon.html#icon-collection
在main.ts中引入Element-Plus-icon
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
Object.keys(ElementPlusIconsVue).forEach((key) => {
app.component(key, ElementPlusIconsVue[key])
})- 第一種直接點(diǎn)擊圖標(biāo)復(fù)制<el-icon>
<el-icon><ArrowRight /></el-icon>
- 第二種通過icon="el-icon-plus"
<el-button type="success" icon="el-icon-plus" >
1111
</el-button>- 第三種通過SVG
<template>
<div style="font-size: 20px">
<!-- 由于SVG圖標(biāo)默認(rèn)不攜帶任何屬性 -->
<!-- 你需要直接提供它們 -->
<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" />
</div>
</template>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用vue-area-linkage實(shí)現(xiàn)地址三級(jí)聯(lián)動(dòng)效果的示例
很多時(shí)候我們需要使用地址三級(jí)聯(lián)動(dòng)，即省市區(qū)三級(jí)聯(lián)動(dòng)，這篇文章主要介紹了Vue使用vue-area-linkage實(shí)現(xiàn)地址三級(jí)聯(lián)動(dòng)效果的示例，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章主要介紹了vue中window.onresize的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vxe-table 設(shè)置單元格垂直對(duì)齊的方法
在vxe-table中,可通過cell-style或cell-class-name設(shè)置單元格垂直對(duì)齊,使用verticalAlign: top實(shí)現(xiàn)頂部對(duì)齊,默認(rèn)為垂直居中,合并單元格時(shí)同樣支持此設(shè)置,本文給大家介紹vxe-table 設(shè)置單元格垂直對(duì)齊的方法,感興趣的朋友一起看看吧2025-06-06
這篇文章主要介紹了vant之van-list的使用及踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue2.0 axios前后端數(shù)據(jù)處理實(shí)例代碼
本篇文章主要介紹了vue2.0 axios前后端數(shù)據(jù)處理實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-06-06
vue-router實(shí)現(xiàn)嵌套路由的講解
今天小編就為大家分享一篇關(guān)于vue-router實(shí)現(xiàn)嵌套路由的講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
vue cli 3.0通用打包配置代碼,不分一二級(jí)目錄
這篇文章主要介紹了vue cli 3.0通用打包配置代碼,不分一二級(jí)目錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-09-09
Vue createRenderer 自定義渲染器從入門到實(shí)戰(zhàn)
本文主要介紹了Vue createRenderer 自定義渲染器從入門到實(shí)戰(zhàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2026-01-01
Vue?狀態(tài)存儲(chǔ)和會(huì)話存儲(chǔ)同步清空問題解決方案(最新推薦)
文章介紹了在使用Pinia定義的useHeaderTabStore中,tab狀態(tài)通過會(huì)話存儲(chǔ)初始化但未在退出登錄時(shí)同步清空的問題,通過在PiniaStore中定義清空tab的函數(shù),并在退出登錄時(shí)調(diào)用該函數(shù),可以確保狀態(tài)和會(huì)話存儲(chǔ)同步清空,避免內(nèi)存中殘留舊數(shù)據(jù),感興趣的朋友一起看看吧2024-12-12
vue實(shí)現(xiàn)經(jīng)典選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)經(jīng)典選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03