ElementPlus 按需引入

1. 安装插件

yarn add -D unplugin-vue-components unplugin-auto-import

2. 配置文件

2.1 通过 Vue-cli 创建的项目

修改配置文件vue.config.js

const { defineConfig } = require('@vue/cli-service')

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: {
    plugins: [

      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
})

2.2 通过 Vite 创建的项目

修改配置文件vite.config.ts

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [

    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

2.3 普通项目 Webpack 打包

修改配置文件webpack.config.js

const AutoImport = require('unplugin-auto-import/webpack') 
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [

    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

提示

注意！如果您使用 unplugin-element-plus 并且只使用组件 API，您需要手动导入样式。

import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'