vue3無法顯示element-plus問題及解決
vue3無法顯示element-plus
原本想使用el-tree做目錄，結(jié)果找了很久的原因都無法顯示，并且沒有任何報錯，但是在調(diào)試的過程中發(fā)現(xiàn)el-tree使用的數(shù)據(jù)是對象形式的
并且還報了el-tree組件無法解析
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é)果其他組件也都無法使用，那么很有可能是掛載出現(xiàn)問題
因為將所有需要掛載使用的變量放在了一個use里導(dǎo)致的，還是得多熟悉才行
正確使用方法
vue3使用Element-plus的圖標(biāo)
首先安裝Element-Plus-icon
# 選擇一個你喜歡的包管理器 # 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])
})- 第一種直接點擊圖標(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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用vue-area-linkage實現(xiàn)地址三級聯(lián)動效果的示例
很多時候我們需要使用地址三級聯(lián)動，即省市區(qū)三級聯(lián)動，這篇文章主要介紹了Vue使用vue-area-linkage實現(xiàn)地址三級聯(lián)動效果的示例，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章主要介紹了vue中window.onresize的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在vxe-table中,可通過cell-style或cell-class-name設(shè)置單元格垂直對齊,使用verticalAlign: top實現(xiàn)頂部對齊,默認(rèn)為垂直居中,合并單元格時同樣支持此設(shè)置,本文給大家介紹vxe-table 設(shè)置單元格垂直對齊的方法,感興趣的朋友一起看看吧2025-06-06
這篇文章主要介紹了vant之van-list的使用及踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue2.0 axios前后端數(shù)據(jù)處理實例代碼
本篇文章主要介紹了vue2.0 axios前后端數(shù)據(jù)處理實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
今天小編就為大家分享一篇關(guān)于vue-router實現(xiàn)嵌套路由的講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了vue cli 3.0通用打包配置代碼,不分一二級目錄，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue createRenderer 自定義渲染器從入門到實戰(zhàn)
本文主要介紹了Vue createRenderer 自定義渲染器從入門到實戰(zhàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2026-01-01
Vue?狀態(tài)存儲和會話存儲同步清空問題解決方案(最新推薦)
文章介紹了在使用Pinia定義的useHeaderTabStore中,tab狀態(tài)通過會話存儲初始化但未在退出登錄時同步清空的問題,通過在PiniaStore中定義清空tab的函數(shù),并在退出登錄時調(diào)用該函數(shù),可以確保狀態(tài)和會話存儲同步清空,避免內(nèi)存中殘留舊數(shù)據(jù),感興趣的朋友一起看看吧2024-12-12
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)經(jīng)典選項卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03