Vite 按需引入 ElementPlus

一、安装依赖

pnpm i element-plus
pnpm i unplugin-auto-import unplugin-element-plus unplugin-vue-components -D

二、配置自动导入

2.1、配置 vite.config.ts

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import ElementPlus from 'unplugin-element-plus/vite'
import AutoComponents from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
      dts: 'types/auto-generate/auto-import.d.ts',
    }),
    AutoComponents({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
      dts: 'types/auto-generate/auto-components.d.ts',
    }),
    ElementPlus({ useSource: true }), // Element Plus 样式自动按需导入
  ],
})

2.2、修改 App.vue

<template>
  <ElConfigProvider :locale="zhCn">
    <RouterView />
  </ElConfigProvider>
</template>

<script setup lang="ts">
defineOptions({ name: 'App' })
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
</script>

<style lang="scss" scoped></style>

三、主题自定义

3.1、创建主题文件

在 src/styles/element-plus/theme.scss 中添加

/* more：https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #006fff,
    ),
    'success': (
      'base': #03c988,
    ),
    'warning': (
      'base': #ff983f,
    ),
    'danger': (
      'base': #ff3d3d,
    ),
  ),

  $card: (
    'padding': 16px,
  )
);

3.2、全局注入主题

vite.config.ts

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/element-plus/theme.scss" as *;`,
      },
    },
  },
})

更多全局样式注入操作细节请 点我了解更多

四、额外聊聊

我个人一般不用 Element Plus 自带的图标，基本都是 svg 格式的图标，如果有需要的话，可以参照 官网流程 来就行，或全局引入，或局部 import，这个配置可以按需引入组件和样式，减少打包体积，提高性能