How to use Element-Ui with Vue3? Element-Plus#Import on demand

Vue3 cannot use Element-ui directly and needs to be replaced by Element-plus.

Here is the official document of +——↓——↓——+Element-plus

Reference document:  element-Plus Chinese website

The old rules are nonsense, stop talking and install dependencies directly.

$ npm install element-plus --save


$ yarn add element-plus

After the installation is completed, if you see this version model, it is considered a successful installation.

 How to import on demand:

First you need to install unplugin-vue-components these  unplugin-auto-importtwo plug-ins

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

After the installation is complete, find vue.config.js 

If it is a new Vue3 project, you can directly take the following code away

// +————————————————
// +vue.config.js
// +————————————————
const { defineConfig } = require('@vue/cli-service')
// Element Plus按需导入
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = defineConfig({
  transpileDependencies: true,
  // 配置网络包——+—————configureWebpack———————————
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  }
})

In this way, you can use it directly from the component library.

 But now the font icon component library still cannot be used.

If you want to use the icon component directly like a use case , you need to register the component globally before you can use it directly in the project.

Need to install icon component dependencies

$ npm install @element-plus/icons-vue

Old rule: If it is a new Vue3 project, you can directly take the following code away 

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
//  +————————————element注册所有图标————————————————————————————
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

//  +————————————element注册所有图标————————————————————————————
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(store)
app.use(router)
app.mount('#app')