快捷導(dǎo)航

Vue3導(dǎo)入Elementplus時(shí)組件無(wú)法加載的情況及解決

更新時(shí)間：2024年03月15日 09:02:00 作者：AXISAGA

這篇文章主要介紹了Vue3導(dǎo)入Elementplus時(shí)組件無(wú)法加載的情況及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助

Vue3導(dǎo)入Elementplus時(shí)組件無(wú)法加載

在使用Vue3結(jié)合Elementplus做組件導(dǎo)入時(shí)，出現(xiàn)了組件無(wú)法顯示，只在網(wǎng)頁(yè)中出現(xiàn)了組建template中涉及ui中的相關(guān)字符串，或者頁(yè)面中完全沒(méi)有顯示的情況。

經(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)建的，也就是說(shuō)Element注冊(cè)被調(diào)用時(shí)，注冊(cè)到了一個(gè)還沒(méi)有產(chǎn)生，并不存在的“app”上，這樣的注冊(cè)顯然是空的無(wú)效的。

而后產(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)該不僅限于此，可以說(shuō)，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>