Element-ui/Element-plus Vue error reporting problem and solution

This article mainly solves the problem of element-ui failure error encountered in Vue 3.0 version

element-ui front-end components

A set of Vue2.0-based desktop component library prepared for developers, designers and product managers. Note that it is Vue2.0

Installation documentation:/#/zh-CN/component/installation

In this way, the problem arises. In Vue 3.0, element-ui will fail or even report an error

And there is only one vague statement in the official document

so,element-plusHere comes

element-plus front-end component

This document will help you upgrade from Element to Element Plus

Installation documentation:/#/zh-CN/component/installation

npm

npm install element-plus --save

vue-ui installation method

New version does not support ElementUI yet

If you want to install dependencies in vue-ui interface

To manage projects in vue-cli UI (by running vue ui), you can add Element plugin by:

Go to the Plugin menu, click the + Add plugin button in the upper right corner, find vue-cli-plugin-element and install it.

Import Element-UI related resources

import Vue from 'vue';
//Introduce elementimport ElementUI from 'element-ui';
//Introduce element cssimport 'element-ui/lib/theme-chalk/';
import App from './';
//Calling ElementUI through the use function(ElementUI);

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

It is important to introduce style resources. Many times, style errors are not written incorrectly, but lack of style resources.

Import on demand

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) => {
  (lang)
  (ElButton)
  (ElForm)
  (ElInput)
}

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.