一、下载 + 配置自动导入

1. 下载 ElementPlus

npm i element-plus --save

yarn add element-plus

✅ pnpm i element-plus

2. 配置按需加载

• 首先需要安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件：

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

• 然后把下列代码插入到 Vite 或 Webpack 的配置文件中：
  • 注意：有些代码是文件里面已经有的，所以需要看清楚，哪些不需要重复导入；
  • Vite：

    // vite.config.ts
    import { defineConfig } from 'vite'
    import AutoImport from 'unplugin-auto-import/vite'
    import Components from 'unplugin-vue-components/vite'
    import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
    
    export default defineConfig({
      // ...
      plugins: [
        // ...
        AutoImport({
          resolvers: [ElementPlusResolver()],
        }),
        Components({
          resolvers: [ElementPlusResolver()],
        }),
      ],
    })
    

  • 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()],
        }),
      ],
    }
    

• 至此，就可以直接使用插件了（我们配置了自动导入，所以不用管导入了，直接使用即可）；

二、定制主题色

• 项目中的颜色和 ElementPlus 的颜色有冲突；
• ElementPlus主题定制链接；

2.1 定制步骤

• 安装 scss;
  • 基于 Vite 的项目默认不支持 scss 预处理器，需要开发者单独安装；

  yarn add sass -D
  npm i sass -D
  

• 准备定制样式文件；

  src/styles/element/index.scss
  

  /* 只需要重写你需要的即可 */
  @forward 'element-plus/theme-chalk/src/common/var.scss' with (
    $colors: (
      'primary': (
        // 主色
        'base': #27ba9b,
      ),
      'success': (
        // 成功色
        'base': #1dc779,
      ),
      'warning': (
        // 警告色
        'base': #ffb302,
      ),
      'danger': (
        // 危险色
        'base': #e26237,
      ),
      'error': (
        // 错误色
        'base': #cf4444,
      ),
    )
  )
  

• 对 ElementPlus 样式进行覆盖；
  • 通知 Element 采用 scss 语言 -> 导入定制 scss 文件覆盖；

2.2 自动导入配置

• 这里自动导入需要深入到 ElementPlus 的组件中，按照官方的配置文档来；
  • 自动导入定制化样式文件进行样式覆盖；
  • 按需定制主题配置（需要安装 unplugin-element-plus）

  import { fileURLToPath, URL } from 'node:url'
  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import AutoImport from 'unplugin-auto-import/vite'
  import Components from 'unplugin-vue-components/vite'
  import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  // 导入对应包
  import ElementPlus from 'unplugin-element-plus/vite'
  export default defineConfig({
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [
          // TODO 1.配置 elementPlus 采用 sass 样式配色系统
          ElementPlusResolver({
            importStyle: 'sass'
          })
        ]
      }),
      // 按需定制主题配置
      ElementPlus({
        useSource: true,
      }),
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          // 自动导入定制化样式文件进行样式覆盖
          additionalData: `
            @use "@/styles/element/index.scss" as *;
          `,
        }
      }
    }
  })