vue引入element-ui之后,頁面是空白的問題及解決
vue引入element-ui之后,頁面是空白的
vue引入element-ui之后，頁面是空白的，原因是vue是vue3的版本，然后引入格式用的是vue2的，所以會頁面是空白的。
1、確定項目是vue幾
1、打開package.json里面的dependencies有
2、vue2引入element-ui的方法
使用npm安裝element-ui
npm i element-ui --save
然后main.js里引入
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'
然后vue使用
Vue.use(ElementUI)
然后vue文件里就可以使用element-ui組件了
3、vue3引入element-ui的方法
使用npm安裝element-plus
npm install element-plus --save
然后main.js里引入
import ElementPlus from 'element-plus'; import 'element-plus/theme-chalk/index.css';
index.css的文件位置根據實際情況寫，也有可能是
import 'element-plus/lib/theme-chalk/index.css'
然后vue使用
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')
然后就可以在需要的vue文件里使用element-ui了，
vue項目頁面空白的幾個原因及解決
Vue引入element-ui報錯：Uncaught TypeError: Cannot read property ‘prototype‘ of undefined
背景
使用vue3.0引入element-ui
第一步
npm i element-ui -S
第二步 在main.js 配置如下:
import ElementUI from "element-ui"; import "element-plus/lib/theme-chalk/index.css"; Vue.use(ElementUI)
配置無誤、代碼未報錯，運行時頁面空白，F(xiàn)12控制臺報錯：
Uncaught TypeError: Cannot read property ‘prototype’ of undefined
錯誤原因：引入element-ui方式錯誤（vue3.0的坑），正確如下：
第一步
npm install element-plus --save
第二步 配置main.js
import ElementUI from "element-plus"; import "element-plus/lib/theme-chalk/index.css" Vue.use(ElementUI)
注意哦?。?！ 是element-plus
總結
重新啟動，解決！
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue實現(xiàn)綁定事件的方法實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了Vue中使用debugger在瀏覽器中不起作用的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
關于Uncaught(in?promise)TypeError:?list?is?not?iterable報錯
這篇文章主要給大家介紹了關于Uncaught(in?promise)TypeError:?list?is?not?iterable報錯的解決方法,文中通過示例代碼介紹的非常詳細,對大家學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
mui-player自定義底部導航在vue項目中顯示不出來的解決
這篇文章主要介紹了mui-player自定義底部導航在vue項目中顯示不出來的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了Vue快速實現(xiàn)通用表單驗證的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
在本篇文章里小編給大家整理的是關于卸載vue2.0并升級vue_cli3.0的實例內容，需要的朋友們可以學習參考下。2020-02-02
本文主要介紹了vue中ref實現(xiàn)子向父傳值的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
這篇文章主要介紹了全局引入vant后使用Toast的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue-cli3在main.js中console.log()會報錯的解決
這篇文章主要介紹了vue-cli3在main.js中console.log()會報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
使用Element的InfiniteScroll 無限滾動組件報錯的解決
這篇文章主要介紹了使用Element的InfiniteScroll 無限滾動組件報錯的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07