preface

I believe that many companies are using Vue with Elemental-UI. However, recently, the elemental-UI on demand import editor used Vue add Element, resulting in the re-rendering of app. Vue entry component, which is a big bug. For example, I configured a lot of things in app.vue and wrote a lot of functions, which would be lost without backup.

I. Element-UI import on demand

Terminal input:

vue add element 
Copy the code

You can see that let’s choose to Import all or Import on demand, in which case we choose Import on demand.

Then select zh-cn and you can see that there is a plugins folder with an element.js file and an import in main.js, and babel.config.js is injected with the content.

As follows:

There are more introductions in main.js:

Babel.config.js has many configurations:

Usage:

import Vue from 'vue'
import { Message } from 'element-ui'

Vue.use(Message)
Copy the code

It is not clear why this loading method causes the above problems, which automatically pop up after every page refresh.

Solution:

Change the way you import a build to:

import Vue from 'vue'
import { Message } from 'element-ui'

Vue.component(Message)
Copy the code

The result was still an error:

The reason:

When introducing an Element component separately on demand, the Message component needs to be mounted to the Vue global object instead of vue.use (Message), which distinguishes the Message component from other components. The same component that needs to be mounted to a Vue global object is the Confirm component.

import Vue from 'vue'
import { Message } from 'element-ui'

Vue.component(Message)
// Mount to Vue global objects
Vue.prototype.$message = Message
Copy the code

Uninstalling Element – UI

Error when uninstalling Element – UI:

$ vue-cli-service inspect –mode production

ERROR Error: Duplicate plugin/preset detected. If you’d like to use two separate instances of a plugin, they need separate names, e.g. plugins: [ [‘some-plugin’, {}], [‘some-plugin’, {}, ‘some unique name’], ]

The reason:

End solution: If you have completely uninstalled element-UI, remove the plugins in babel.config.js.

Three, the correct unloading steps

  1. Console enter vue UI to find uninstall in the dependencies of control panel

  2. Delete the project SRC plugins folder

  3. Remove the element-UI import from main.js

  4. Remove the plugins in babel.config.js for element-UI configuration

conclusion

Introduced an on-demand, not easy, so much into a pit, small make up before they are introduced, global resource consumption is too large, convenient, however, does not need to be on demand loading component, but the average company in the use of these components are introduced as needed, in order to reduce project volume, improve the system performance, will do more optimization strategy.