Element-ui/Element-plus?Vue報(bào)錯(cuò)問(wèn)題及解決
這篇主要是解決在Vue3.0版本中遇到的element-ui失效報(bào)錯(cuò)的問(wèn)題
element-ui前端組件
一套為開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于Vue2.0的桌面端組件庫(kù)，注意，是Vue2.0
安裝文檔：https://element.eleme.cn/#/zh-CN/component/installation
這樣，問(wèn)題就來(lái)了，在Vue3.0中，element-ui會(huì)失效甚至報(bào)錯(cuò)
并且官方文檔里只有一句話模糊說(shuō)明
所以，element-plus來(lái)了
element-plus前端組件
本文檔將幫助你從 Element 2.x 升級(jí)至 Element Plus
安裝文檔：https://element-plus.gitee.io/#/zh-CN/component/installation
npm
npm install element-plus --save
vue-ui安裝方式
新版3.x 暫時(shí)還不支持ElementUI
如果要在vue-ui界面化中安裝依賴
在vue-cli UI中管理項(xiàng)目（通過(guò)運(yùn)行vue ui），可以通過(guò)以下方法添加Element插件：
轉(zhuǎn)到“插件”菜單，單擊右上角的+ Add plugin按鈕，找到vue-cli-plugin-element并安裝它。
導(dǎo)入Element-UI相關(guān)資源
import Vue from 'vue';
//引入element
import ElementUI from 'element-ui';
//引入element的css
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
//通過(guò)use函數(shù)調(diào)用ElementUI
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
引入樣式資源很重要，很多時(shí)候樣式出錯(cuò)并不是寫(xiě)錯(cuò)，而是沒(méi)有樣式資源
按需導(dǎo)入
import { ElButton, ElForm, ElInput } from 'element-plus'
import lang from 'element-plus/lib/locale/lang/zh-cn'
import locale from 'element-plus/lib/locale'
export default (app) => {
locale.use(lang)
app.use(ElButton)
app.use(ElForm)
app.use(ElInput)
}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue-router路由該如何使用，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
基于vue實(shí)現(xiàn)新聞自下往上滾動(dòng)效果(示例代碼)
這篇文章主要介紹了vue新聞自下往上滾動(dòng)效果,當(dāng)鼠標(biāo)鼠標(biāo)放上暫停滾動(dòng)，鼠標(biāo)移出繼續(xù)滾動(dòng)，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-04-04
vue3中的reactive函數(shù)聲明數(shù)組方式
這篇文章主要介紹了vue3中的reactive函數(shù)聲明數(shù)組方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue3?中使用?jsx?開(kāi)發(fā)的詳細(xì)過(guò)程
這篇文章主要介紹了vue3?中使用?jsx?開(kāi)發(fā),本文著重說(shuō)一下在使用 .vue 文件和 .jsx 文件在使用語(yǔ)法上的差異，需要的朋友可以參考下2022-09-09
vue級(jí)聯(lián)選擇器的getCheckedNodes使用方式
這篇文章主要介紹了vue級(jí)聯(lián)選擇器的getCheckedNodes使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
vue3.0 CLI - 2.6 - 組件的復(fù)用入門(mén)教程
這篇文章主要介紹了 vue3.0 CLI - 2.6 - 組件的復(fù)用，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09
本文主要介紹了深入理解vue3中的reactive()，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
詳解如何使用 vue-cli 開(kāi)發(fā)多頁(yè)應(yīng)用
本篇文章主要介紹了詳解如何使用 vue-cli 開(kāi)發(fā)多頁(yè)應(yīng)用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
這篇文章主要介紹了vue限制文本框輸入數(shù)字的正確姿勢(shì)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue中將網(wǎng)頁(yè)打印成pdf實(shí)例代碼
本篇文章主要介紹了vue中將網(wǎng)頁(yè)打印成pdf實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06