Vue3 introduces Element Plus on demand

This article records the blogger's own test in the Vue3 project framework created by Vite to install and configure the steps to introduce Element Plus on demand from 0 

Note: The following configuration example is a Vue3 scaffolding project built by Vite

Element UI Official Guide

 Install required plugins

Please open a terminal in the project root directory and execute the following installation instructions:

1. Install Element Plus

npm install element-plus --save

2. Install the plug-in that automatically imports components 

npm install -D unplugin-vue-components unplugin-auto-import

 3. Install plug-ins that import styles on demand

npm i unplugin-element-plus -D

Configuration.config.js/ts file

Then insert the following code into  your  configuration fileVite  or Webpack

// ...
// 引入 element UI
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 为 Element Plus 按需引入样式。
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    ElementPlus({
      // options
    }),
  ]
})

 Note! ! ! After the installation and configuration, it is best to restart the service and recompile it. Generally, the first startup time will be a little longer after installation . As long as there is no error, just wait patiently for it to be loaded~

Example of use

Note: After completing the above two steps of installation and configuration, you can directly use the components provided by Element UI in the page/component , and you don't , just use the components directly . Examples are as follows:

Page effect:

 

Note: If the configuration file is webpack, please refer to the official document - quick start/import on demand/webpack

Unplugin-element-plus  docs that introduce styles on demand  for Element Plus

As long as their configurations are slightly different, the installation of the required plug-ins is the same, so they can be used directly after they are fully installed and then configured uniformly!