Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to introduce vue3 element plus on demand. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Global import

After downloading and installing element plus, configure and mount the entry file, and you can use it without hindrance. But the problem is that a lot of unwanted components have been packaged, resulting in a very large package.

Import on demand

The method of import on demand is actually deconstructed from the package of element and mounted to app. In this way, it is really good to package whatever components are used in the development, reducing the size of the package. But there is a new problem, that is, every time you want to use a new component, you have to deconstruct it and mount it. The operation is very tedious.

Is there any way to configure it only once like using a global introduction, and what components will be used later, which will be loaded on demand?

Vite project demo

Need to use two plug-ins vite-plugin-style-import, vite-plugin-components these two plug-ins.

Download npm I vite-plugin-style-import vite-plugin-components-D first

Then configure vite.config.js

/ / vite.config.js import styleImport from 'vite-plugin-style-import'import ViteComponents, {ElementPlusResolver} from' vite-plugin-components' export default defineConfig ({plugins: [vue (), / / Import element-plus component ViteComponents ({customComponentResolvers: [ElementPlusResolver ()],}) / / Import css style styleImport of element-plus on demand ({libs: [{libraryName: 'element-plus', esModule: true, resolveStyle: name = > {return `element-plus/lib/theme-chalk/$ {name} .css`}) },],})

Do you need to configure main.js again? No, after installing element-plus, you can configure vite.config.js. The plug-in will automatically mount the processing.

Import {createApp} from 'vue'// import ElementPlus from' element-plus'// import 'element-plus/lib/theme-chalk/index.css'import App from'. / App.vue' createApp (App) .mount ('# app')

This is only configured once, and each time a component is used, it will be automatically imported. Achieve your goal perfectly.

Attachment: about some pits introduced by Element-plus on demand

When the plug-in does not recognize the css file when using component messages such as Elmessage that write feedback prompt messages in the js file, the following effect occurs

At this point, you need to manually import the css files you need into main.ts, such as

Import 'element-plus/theme-chalk/el-message.css

If you want to save trouble and bring in all the css files, that's it.

Import 'element-plus/dist/index.css'

However, since it is all introduced on demand, elegance is elegant to the end, and try not to introduce it all. The effect of introducing successful elmessage should be like this.

Maybe the unplugin-vue-components plug-in will update and fix the bug later, but temporarily if it hasn't been fixed.

This is the end of the article on "how to introduce vue3 element plus on demand". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.