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