vue引入element-ui之后,頁面是空白的問題及解決
vue引入element-ui之后,頁面是空白的
vue引入element-ui之后，頁面是空白的，原因是vue是vue3的版本，然后引入格式用的是vue2的，所以會頁面是空白的。
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控制臺報(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é)
重新啟動，解決！
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Elementui?el-input輸入框校驗(yàn)及表單校驗(yàn)實(shí)例代碼
輸入框是使用非常多的元素,用來輸入用戶名、密碼等等信息,Element提供了功能和樣式豐富的輸入框,下面這篇文章主要給大家介紹了關(guān)于Elementui?el-input輸入框校驗(yàn)及表單校驗(yàn)的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue-seamless-scroll 實(shí)現(xiàn)簡單自動無縫滾動且添加對應(yīng)點(diǎn)擊事件的簡單整理
vue-seamless-scroll是一個(gè)基于Vue.js的簡單無縫滾動組件, 基于requestAnimationFrame實(shí)現(xiàn),配置多滿足多樣需求，目前支持上下左右無縫滾動，單步滾動，及支持水平方向的手動切換功能，本節(jié)介紹，vue添加 vue-seamless-scroll實(shí)現(xiàn)自動無縫滾動的效果，并對應(yīng)添加點(diǎn)擊事件2023-01-01
這篇文章主要介紹了vue實(shí)現(xiàn)路由切換改變title功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
小編之前介紹了通過vue.js計(jì)算屬性，不知道大家都學(xué)會了嗎。那這篇文章中我們將一起學(xué)習(xí)vue.js實(shí)現(xiàn)綁定class和style樣式，有需要的朋友們可以參考借鑒。2016-09-09
這篇文章主要介紹了vue 組件中添加樣式不生效的解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
在開發(fā)過程中,啟動項(xiàng)目是必不可少的一步,本文介紹了兩種啟動項(xiàng)目的方法,第一種方法是通過命令提示符(cmd)進(jìn)入項(xiàng)目目錄,然后輸入npm run serve來啟動項(xiàng)目,第二種方法是直接在項(xiàng)目目錄下打開命令提示符(cmd),輸入npm run serve即可啟動項(xiàng)目2024-10-10
在vue2項(xiàng)目中使用dart-sass的問題及解決方法
在Vue2項(xiàng)目中,使用dart-sass替代node-sass可以解決安裝困難和環(huán)境兼容問題,VueCLI3+用戶可直接使用,而VueCLI2用戶需升級VueCLI和項(xiàng)目,具體方法包括修改package.json依賴并使用.scss文件編寫樣式,此更改有助于提升項(xiàng)目的開發(fā)效率和跨平臺兼容性2024-09-09
Vue3中使用匿名函數(shù)的方法實(shí)現(xiàn)
Lambda函數(shù),也稱為匿名函數(shù),是Vue3中的一種函數(shù)類型,綁定匿名方法和綁定普通方法主要是寫法上的區(qū)別,其他的區(qū)別并不是很大,本文主要介紹了Vue3中使用匿名函數(shù)的方法實(shí)現(xiàn),感興趣的可以了解一下2023-12-12
Vue實(shí)現(xiàn)圖片輪播組件思路及實(shí)例解析
這篇文章主要介紹了Vue實(shí)現(xiàn)圖片輪播組件思路及實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了vue-axios的使用以及axios請求賦值為空的問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04