preface

Global import

Once you’ve downloaded and installed Element Plus, configure and mount the entry file, and you’re ready to use it without a hitch. The problem is that a lot of unused components are packed into the package, resulting in a very large package.

According to the need to import

The on-demand import method is actually deconstructed from the element package and then mounted to the app. This is a good way to package whatever components are used in development, reducing the size of the package. However, the new problem is that every time you want to use a new component, you have to deconstruct it and mount it. It is very tedious to operate.

Is there any way to only configure it once, as with global import, and then load whatever components are used on demand?

Vite project demo

Two plugins are needed: vite-plugin-style-import and vite-plugin-Components. Download NPM I vite-plugin-style-import vite-plugin-components -d and 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 components on demand
        ViteComponents({
            customComponentResolvers: [ElementPlusResolver()],
        }),
        // Import element-Plus CSS styles on demand
        styleImport({
            libs: [{libraryName: 'element-plus'.esModule: true.resolveStyle: name= > {
                        return `element-plus/lib/theme-chalk/${name}.css`},},],}),})Copy the code

Do I need to configure main.js again? No, just install element-plus and configure vite.config.js. The plug-in is automatically mounted.

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')
Copy the code

This is configured once and automatically imported each time the component is used. Achieve your goal perfectly.