Vue3 中使用 element-plus

1. 环境

node -v
## v16.14.2

vue -V
## @vue/cli 5.0.8

# "element-plus": "^2.3.8",
# "vue": "^3.2.13",

npm i -D unplugin-element-plus unplugin-auto-import unplugin-vue-components
# "unplugin-element-plus": "^0.8.0",
# "unplugin-auto-import": "^0.16.6",
# "unplugin-vue-components": "^0.25.1"

2. 配置

vue.config.js:

/* eslint-disable import/no-extraneous-dependencies,import/extensions,import/no-unresolved */
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');
const ElementPlus = require('unplugin-element-plus/webpack');

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,

  css: {
    loaderOptions: {
      scss: {
        additionalData: '@use "@/assets/styles/element/element-vars.scss" as *;',
      },
    },
  },

  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [
          ElementPlusResolver({
            // 自动按需导入，自定义主题，需要设置 importStyle: 'sass'
            importStyle: 'sass',
          }),
        ],
      }),
      Components({
        resolvers: [
          ElementPlusResolver({
            // 自动按需导入，自定义主题，需要设置 importStyle: 'sass'
            importStyle: 'sass',
          }),
        ],
      }),
      // 如果没有下面的插件，使用 script setup 时， element-plus 按需引入样式丢失
      ElementPlus({
        useSource: true,
      }),
    ],
  },
});

element-vars.scss:

@use "../vars" as *;

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': $color-primary,
    ),
  ),
);