Element-ui/Element-plus Vue报错问题及解决

这篇主要是解决在vue3.0版本中遇到的element-ui失效报错的问题

element-ui前端组件

一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库，注意，是Vue2.0

安装文档：https://element.eleme.cn/#/zh-CN/component/installation

这样，问题就来了，在Vue3.0中，element-ui会失效甚至报错

并且官方文档里只有一句话模糊说明

所以，element-plus来了

element-plus前端组件

本文档将帮助你从 Element 2.x 升级至 Element Plus

安装文档：Https://element-plus.gitee.io/#/zh-CN/component/installation

npm

npm install element-plus --save

vue-ui安装方式

新版3.x 暂时还不支持ElementUI

如果要在vue-ui界面化中安装依赖

在vue-cli UI中管理项目（通过运行vue ui），可以通过以下方法添加Element插件：

转到“插件”菜单，单击右上角的+ Add plugin按钮，找到vue-cli-plugin-element并安装它。

导入Element-UI相关资源

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函数调用ElementUI
Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

引入样式资源很重要，很多时候样式出错并不是写错，而是没有样式资源

按需导入

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)
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。