Vue 3 中按需引入 Element Plus 或 Ant Design Vue 的核心是使用 unplugin-auto-import 和 unplugin-vue-components 实现自动导入与注册，Element Plus 需配置 ElementPlusResolver 并添加全局类型，Ant Design Vue 推荐仅用 Components 插件配合 AntDesignVueResolver，样式须单独引入 reset.css 或 index.css。

Vue 3 项目中配置按需引入 Element Plus 或 Ant Design Vue，核心是借助自动导入插件减少手动 import，同时确保类型提示、样式加载和组件注册都正确生效。两种库的配置逻辑相似，但 resolver 和插件细节不同，下面分库说明关键步骤。

Element Plus 按需引入（推荐方案）

使用 unplugin-auto-import 和 unplugin-vue-components 实现自动导入与自动注册：

• 安装依赖：pnpm add -D unplugin-auto-import unplugin-vue-components
• 在 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 defineConfig({
    plugins: [
      vue(),
      AutoImport({
        imports: ['vue', 'vue-router'],
        resolvers: [ElementPlusResolver()],
        dts: './src/auto-imports.d.ts' // 生成类型声明
      }),
      Components({
        resolvers: [ElementPlusResolver()],
        dts: './src/components.d.ts'
      })
    ]
  })

• 确保已安装 element-plus 并在 tsconfig.json 中加入：
  "types": ["element-plus/global"]（启用全局组件类型提示）
• 无需在组件中手动 import { ElButton } from 'element-plus'，直接写 <el-button> 即可被识别和导入

Ant Design Vue 按需引入（简洁版）

Ant Design Vue 官方推荐使用 unplugin-vue-components + ant-design-vue/resolver，不强制依赖 auto-import（因其 API 多为命名导出，非指令/组件类）：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• 安装依赖：pnpm add ant-design-vue；开发依赖：pnpm add -D unplugin-vue-components
• 在 vite.config.ts 中配置：

  import Components from 'unplugin-vue-components/vite'
  import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
  
  export default defineConfig({
    plugins: [
      vue(),
      Components({
        resolvers: [AntDesignVueResolver()],
        dts: './src/components.d.ts'
      })
    ]
  })

• 样式需单独引入：在 main.ts 中添加 import 'ant-design-vue/dist/reset.css'
• 如需自动导入常用工具函数（如 message.success），可额外加 AutoImport 并配置 AntDesignVueResolver({ importStyle: 'less' })，但注意它不支持自动导入指令（如 v-a-tooltip）

通用注意事项

无论用哪个库，以下几点容易出错，务必检查：

立即学习“前端免费学习笔记（深入）”；

• 插件顺序不能颠倒：vue() 必须在 AutoImport 和 Components 之前
• 缓存干扰：配置变更后运行 pnpm run build --force 或删掉 node_modules/.vite 和 dist 目录再启动
• TS 类型未生效：确认 tsconfig.json 的 types 字段包含对应库的全局类型，且 auto-imports.d.ts 已被 VS Code 正确加载
• 样式缺失：Element Plus 需要 element-plus/dist/index.css；Ant Design Vue 必须用 reset.css（不是旧版的 antd.css）

什么情况下不建议按需引入？

小项目或快速验证原型时，全量引入更省心：

• Element Plus：app.use(ElementPlus) + 引入 CSS
• Ant Design Vue：app.use(antd)（import antd from 'ant-design-vue'）+ reset.css
• 全量引入天然支持 Volar 类型提示，且无插件兼容性问题