Vue3導(dǎo)入Elementplus時(shí)組件無法加載的情況及解決
Vue3導(dǎo)入Elementplus時(shí)組件無法加載
在使用Vue3結(jié)合Elementplus做組件導(dǎo)入時(shí)，出現(xiàn)了組件無法顯示，只在網(wǎng)頁中出現(xiàn)了組建template中涉及ui中的相關(guān)字符串，或者頁面中完全沒有顯示的情況。
經(jīng)排錯(cuò)，是由于main.js文件中完整導(dǎo)入時(shí)，自作主張將Vue3自帶的生成段和ElementPlus提供的部分注冊(cè)段結(jié)合了。
app.use(ElementPlus)
createApp(App).mount('#app')嚴(yán)格按照ElementPlus提供的寫法
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')即可順利顯示組件。
倒推后提出猜想
上面一種寫法中app的聲明是ElementPlus注冊(cè)之后才創(chuàng)建的，也就是說Element注冊(cè)被調(diào)用時(shí)，注冊(cè)到了一個(gè)還沒有產(chǎn)生，并不存在的“app”上，這樣的注冊(cè)顯然是空的無效的。
而后產(chǎn)生的app也不會(huì)被之前的注冊(cè)影響。
后一種寫法，在創(chuàng)建完app后，先將Element注冊(cè)于其上，再mount進(jìn)App.vue中，這就保證了app注冊(cè)進(jìn)Vue主文件中時(shí)，一定是注冊(cè)好Element的。
這個(gè)案例提供的思考應(yīng)該不僅限于此，可以說，Vue3 CLI自帶的main.js雖然簡(jiǎn)化了app全局注冊(cè)的寫法，但是在需要注冊(cè)其他綁定app的依賴時(shí)，都需要采用后者的寫法。
vue3按需導(dǎo)入element-plus報(bào)錯(cuò)Module not found: Error: Can‘t resolve‘element-plus/es/components/button/
由于element-plus版本更新迭代較快，直接安裝npm install element-plus -D會(huì)默認(rèn)安裝最新版本，使用時(shí)可能會(huì)報(bào)錯(cuò)：
Module not found: Error: Can't resolve 'element-plus/es/components/button/style/css'
可以安裝這個(gè)穩(wěn)定的版本：
npm i element-plus@1.3.0-beta.5 -D
就可以直接在vue文件中調(diào)用了：
<template>
<el-row class="mb-4">
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
</el-row>
</template>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
webpack dev-server代理websocket問題
這篇文章主要介紹了webpack dev-server代理websocket問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
響應(yīng)式就是當(dāng)對(duì)象本身(對(duì)象的增刪值)或者對(duì)象屬性(重新賦值)發(fā)生變化時(shí),將會(huì)運(yùn)行一些函數(shù),最常見的就是render函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3響應(yīng)式原理的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue-cli腳手架打包靜態(tài)資源請(qǐng)求出錯(cuò)的原因與解決
這篇文章主要給大家介紹了關(guān)于vue-cli腳手架打包靜態(tài)資源請(qǐng)求出錯(cuò)的原因與解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue-cli具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
基于Vue+ElementUI的省市區(qū)地址選擇通用組件
這篇文章主要介紹了基于Vue+ElementUI的省市區(qū)地址選擇通用組件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
在vue中動(dòng)態(tài)修改css其中一個(gè)屬性值操作
這篇文章主要介紹了在vue中動(dòng)態(tài)修改css其中一個(gè)屬性值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-12-12
前端上傳大文件、視頻的時(shí)候會(huì)出現(xiàn)超時(shí)、過大、很慢等情況,為了解決這一問題,跟后端配合做了一個(gè)切片的功能,接下來就詳細(xì)的給大家介紹一下vue大文件視頻切片上傳的處理方法,需要的朋友可以參考下2023-08-08
vue-element-admin+flask實(shí)現(xiàn)數(shù)據(jù)查詢項(xiàng)目的實(shí)例代碼
這篇文章主要介紹了vue-element-admin+flask實(shí)現(xiàn)數(shù)據(jù)查詢項(xiàng)目,填寫數(shù)據(jù)庫(kù)連接信息和查詢語句，即可展示查詢到的數(shù)據(jù)，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Sublime Text新建.vue模板并高亮(圖文教程)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
element?UI中el-dialog實(shí)現(xiàn)拖拽功能示例代碼
我們?cè)陂_發(fā)中常會(huì)遇見拖拽的功能,下面這篇文章主要給大家介紹了關(guān)于element?UI中el-dialog實(shí)現(xiàn)拖拽功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
Vue實(shí)現(xiàn)登錄功能全套超詳細(xì)講解(含封裝axios)
這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)登錄功能(含封裝axios)的相關(guān)資料,Vue是現(xiàn)在前端最流行的框架之一,作為前端開發(fā)人員應(yīng)該要熟練的掌握它,需要的朋友可以參考下2023-10-10