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