按需自动导入

使用 unplugin-vue-components + unplugin-auto-import 实现

• 自动按需引入 Element Plus 组件和样式
• 自动引入 Vue API

安装

1. pnpm add -D unplugin-vue-components unplugin-auto-import

2. 配置 Vite 插件（vite.config.ts） 打开或创建 vite.config.ts，加入如下配置：

// vite.config.ts
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'

export default defineConfig({
  plugins: [
    vue(),

    // 自动引入 Vue API、Pinia 等
    AutoImport({
      resolvers: [ElementPlusResolver()],
      imports: [
        'vue',
        'vue-router',
      ],
      dts: 'src/auto-imports.d.ts', // 自动生成类型文件
    }),

    // 自动注册组件（ElementPlus 等）
    Components({
      resolvers: [ElementPlusResolver()],
      dts: 'src/components.d.ts',
    }),
  ],
})

3. 配置 tsconfig.json 自动生成的.d.ts 文件需要在 tsconfig.json 配置，否则会出现找不到类型错误

INTERVIEW

1. 你怎么优化 Element Plus 的打包体积？

我使用了 unplugin-auto-import 和 unplugin-vue-components 结合 ElementPlusResolver，实现了按需引入 Element Plus 组件和样式，并开启了 dts 类型支持，这样可以提升开发效率，减小打包体积。