“This is the fifth day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

preface

In his company recently developed a small project, vue2 lazy on style with the element – part of the UI components, packaged deployment to online for the first time, in the absence of on-demand, introducing is directly according to the official documentation on complete introduction above, leads to packaged deployment to online file is too large, now back to modify the introduction, Change to on-demand import.

Element-ui imports on demand

1. Install components

First of all, the import method I used for element-UI was an NPM installation. The original import method was all introduced in the official documentation, so I won’t go into it here, but I’ll talk more about the problems with on-demand import and how I solved my problems.

Install the babel-plugin-Component as described in the documentation on demand:

npm install babel-plugin-component -D
Copy the code

Then I modified the.babelrc file, which I couldn’t find anywhere, and finally I directly modified babel.config.js so that I could import it on demand.

It should be noted that the existing configuration in this document should not be modified, and the configuration in the official document should be added directly at the end. This is the document before I configured it:

After configuration:

This configuration then returns an error when run later: Cannot find module ‘babel-preset-es2015’

Solution: Install babel-PRESET – ES2015 to the deployment environment of the project:

npm install babel-preset-es2015 -D
Copy the code

Then change “es2015” of babel.config.js to “@babel/preset-env”, and restart the preset

2. Introduce the required components

. First of all, according to the official document said, in the main parts, introduced in js, specific how to introduce what is introduced into the official documents have instructions (component | Element)

If too much use is too ugly, it supports chained calls, such as:

Vue.use(Button).use(Select);
Copy the code

1. Introduce the first pit you step in

When importing on demand, not according to the component you use to import on demand, but depending on how many of its tags you use, each used tag needs to import, otherwise there is no way to parse.

Let’s say I use the Click activation in the Dropdown component:

So every tag that you use here, you have to introduce.






all need to be imported. These tags can be found in the official documents that need to be imported:

import { 
    Row,
    Col,
    Dropdown,
    DropdownMenu,
    DropdownItem
    } from 'element-ui';
Vue.use(Row).use(Col).use(Dropdown).use(DropdownMenu).use(DropdownItem);
Copy the code

So it’s not what component you use, it’s what tag you use.

2. Introduce the second pit

Note that some tags are not introduced through use but are bound directly to Vue stereotypes, such as Message:

Vue.prototype.$message = Message
Copy the code

Here the official document also has a note, specific is to look carefully

Also, if you are bound to a prototype, don’t write use again or it may cause bugs for no reason

conclusion

You run into so many problems based on the components you use for the time being, and then update the topic as you run into more problems.

Citation links to external content: blog.csdn.net/heyNewbie/a… Blog.csdn.net/l_XIANA/art…