Element-ui/Element-plus?Vue報(bào)錯(cuò)問題及解決
這篇主要是解決在Vue3.0版本中遇到的element-ui失效報(bào)錯(cuò)的問題
element-ui前端組件
一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于Vue2.0的桌面端組件庫，注意，是Vue2.0
安裝文檔：https://element.eleme.cn/#/zh-CN/component/installation
這樣，問題就來了，在Vue3.0中，element-ui會(huì)失效甚至報(bào)錯(cuò)
并且官方文檔里只有一句話模糊說明
所以，element-plus來了
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)目（通過運(yùn)行vue ui），可以通過以下方法添加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';
//通過use函數(shù)調(diào)用ElementUI
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
引入樣式資源很重要，很多時(shí)候樣式出錯(cuò)并不是寫錯(cuò)，而是沒有樣式資源
按需導(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)文章
Vue2.0實(shí)現(xiàn)將頁面中表格數(shù)據(jù)導(dǎo)出excel的實(shí)例
本篇文章主要介紹了Vue2.0實(shí)現(xiàn)將頁面中表格數(shù)據(jù)導(dǎo)出excel的實(shí)例，非常具有實(shí)用價(jià)值，感興趣的同學(xué)可以了解一下2017-08-08
改變vue請(qǐng)求過來的數(shù)據(jù)中的某一項(xiàng)值的方法(詳解)
下面小編就為大家分享一篇改變vue請(qǐng)求過來的數(shù)據(jù)中的某一項(xiàng)值的方法(詳解)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
@vue/cli4.x版本的vue.config.js常用配置方式
這篇文章主要介紹了@vue/cli4.x版本的vue.config.js常用配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue3動(dòng)態(tài)加載對(duì)話框的方法實(shí)例
對(duì)話框是很常用的組件,在很多地方都會(huì)用到,下面這篇文章主要給大家介紹了關(guān)于vue3動(dòng)態(tài)加載對(duì)話框的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue組件是如何解析及渲染的？，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-01-01
Vue?+?Axios?請(qǐng)求接口方法與傳參方式詳解
使用Vue的腳手架搭建的前端項(xiàng)目，通常都使用Axios封裝的接口請(qǐng)求，項(xiàng)目中引入的方式不做多介紹，本文主要介紹接口調(diào)用與不同形式的傳參方法。對(duì)Vue?+?Axios?請(qǐng)求接口方法與傳參問題感興趣的朋友一起看看吧2021-12-12
這篇文章主要為大家詳細(xì)介紹了vue使用過濾器格式化日期，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要介紹了Vue中使用mixins混入方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue+element項(xiàng)目中過濾輸入框特殊字符小結(jié)
這篇文章主要介紹了vue+element項(xiàng)目中過濾輸入框特殊字符小結(jié)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
vue圓環(huán)百分比進(jìn)度條組件功能的實(shí)現(xiàn)
在一些頁面設(shè)置進(jìn)度條效果給人一種很好的體驗(yàn)效果，今天小編教大家vue圓環(huán)百分比進(jìn)度條組件功能的實(shí)現(xiàn)代碼，代碼超級(jí)簡(jiǎn)單啊，感興趣的朋友快來看下吧2021-05-05