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