Ant Design Vue

基于 Ant Design 设计语言的企业级 Vue UI 组件库，Ant Design 设计体系在 Vue 生态中的官方级实现

基本信息

• 官网：https://antdv.com（中文：https://antdv.com/docs/vue/introduce-cn）
• GitHub：https://github.com/vueComponent/ant-design-vue
• License：MIT
• 最新版本：4.2.6（2024-11-10 发布）
• 主要维护者：tangjinzhou（汤继舟），社区驱动
• 源码语言：Vue 58.3%、TypeScript 27.8%、JavaScript 12.8%

核心特性

1. Ant Design 设计语言：完整继承 Ant Design 的设计规范、交互模式和视觉风格，与 React 版共享同一套设计资源（Figma 设计稿、Sketch 模板等）
2. 60+ 企业级组件：覆盖通用、布局、导航、数据录入、数据展示、反馈等中后台常见场景，组件数量与 Ant Design React 基本对齐
3. TypeScript 全面支持：全部组件提供完整类型定义，支持 Props、Emits、Slots 的类型推导与智能提示
4. CSS-in-JS 主题定制：基于 Design Token 的主题系统，支持 Seed Token → Map Token → Alias Token 三级令牌体系，实现细粒度的运行时主题定制
5. 国际化：内置 60+ 种语言包，支持自定义扩展和运行时语言切换
6. 暗色模式：通过 CSS-in-JS 令牌体系原生支持暗色主题，可配合 ConfigProvider 局部切换
7. 无障碍访问（A11y）：组件遵循 WAI-ARIA 规范，支持键盘导航与屏幕阅读器
8. Vue 3 原生支持：基于 Vue 3 Composition API 编写，支持 <script setup> 语法和响应式系统

组件分类

适用场景

1. 企业级中后台系统：Ant Design 设计语言的核心定位，适合 ERP、CRM、OA、数据分析平台等重数据交互场景
2. 已有 Ant Design React 项目的 Vue 迁移：设计语言一致，交互规范相同，降低多端团队的沟通成本
3. 统一设计体系的多技术栈团队：React 前端用 Ant Design，Vue 前端用 Ant Design Vue，保持视觉和交互一致
4. 内容管理后台（CMS）：配合 Vue 3 + Nuxt 构建内容管理系统的管理界面
5. 快速原型开发：组件丰富、文档完善，适合快速搭建 MVP 或内部工具
6. 数据密集型应用：内置强大的 Table、Tree、Transfer 等数据组件，适合处理复杂数据展示与操作

技术亮点

Ant Design 设计语言

Ant Design Vue 是 Ant Design 设计体系在 Vue 生态中的实现，与 React 版本共享：

• 设计价值观：自然、确定性、意义感、生长性
• 设计原则：亲密、对齐、对比、重复
• 设计资源：共享 Figma 设计稿、Sketch 模板、交互规范文档
• Design Token 体系：三级令牌（Seed → Map → Alias），实现从品牌色到组件样式的系统性定制

CSS-in-JS 主题定制

从 4.x 版本起采用 CSS-in-JS 方案（与 Ant Design 5.x React 版同步），支持：

import { theme } from 'ant-design-vue'
 
// Seed Token → 自动生成完整主题
const customTheme = {
  token: {
    colorPrimary: '#1677ff',      // 品牌主色
    borderRadius: 6,               // 全局圆角
    colorBgContainer: '#ffffff',   // 容器背景色
  }
}

• 组件级定制：通过 theme.components 针对单个组件设置样式令牌
• 运行时切换：配合 ConfigProvider 实现局部主题切换，无需重新编译
• 暗色算法：内置 theme.darkAlgorithm，一行代码切换暗色模式

TypeScript 全面支持

所有组件基于 TypeScript 编写，提供完整的类型推导：

<script setup lang="ts">
import type { TableColumnsType } from 'ant-design-vue'
 
const columns: TableColumnsType = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '年龄', dataIndex: 'age', key: 'age' },
]
</script>

Design Token 三级令牌体系

通过 ConfigProvider 的 theme 属性可在运行时覆盖任意层级的令牌，实现从全局品牌色到单个组件边框粗细的精细控制。

按需引入与 Tree Shaking

基于 ES Modules 原生 Tree Shaking，配合社区插件实现自动按需引入：

• unplugin-vue-components：自动注册组件，无需手动 import
• unplugin-auto-import：自动引入 Vue API 和 Ant Design Vue API

与 Ant Design React 的关系和差异

关键差异：Ant Design Vue 是社区独立维护的项目，并非蚂蚁集团官方出品。它实现了 Ant Design 的设计规范和组件 API，但在实现细节、性能优化和版本迭代上与 React 版存在时间差。React 版已进入 5.x/6.x 时代，Vue 版停留在 4.2.6。

生态集成

Nuxt 3

官方提供 ant-design-vue-nuxt 模块，一键集成：

pnpm add ant-design-vue ant-design-vue-nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['ant-design-vue-nuxt']
})

支持 SSR、自动按需引入和组件自动注册。

Vite

通过 unplugin-vue-components 实现自动按需引入：

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

Vue Router & Pinia

完全兼容，无特殊配置要求。组件（如 Menu、Tabs、Breadcrumb）与 Vue Router 天然配合。

构建工具支持

• Vite：unplugin-vue-components（推荐）
• Webpack：unplugin-vue-components 或 babel-plugin-import
• Rollup：unplugin-vue-components
• esbuild：unplugin-vue-components

官方生态工具

第三方扩展

学习资源

官方文档

• 快速开始 — 安装、按需引入、国际化配置
• 组件总览 — 全部组件分类预览与示例
• 更新日志 — 版本变更记录
• 主题定制 — Design Token 主题方案
• 国际化 — 多语言配置
• 迁移指南（v3 → v4） — 版本升级指引

设计资源

• Ant Design 官网 — 设计语言与规范
• Ant Design Figma 资源 — 官方 Figma 设计文件
• Ant Design 配色 — 品牌色与色板生成

社区资源

• GitHub Discussions — 官方讨论区
• GitHub Issues — Bug 反馈与功能讨论
• 掘金社区 — 大量中文实践文章，搜索 "Ant Design Vue"
• 知乎专栏 — 搜索 "Ant Design Vue" 获取深度技术文章

2026 年现状

版本与发布节奏

• 最新版本：4.2.6（2024-11-10），自 2024 年 11 月起未发布新版本
• 维护状态：项目处于低活跃维护状态，社区对维护进度存在担忧
• v5 路线图：截至 2026 年中，官方尚未发布 v5 版本路线图

社区关注度

• GitHub Issues 中有多个关于项目状态的讨论（#8304、#8381、#8391）
• 用户反馈："项目是否已停止维护？最新版本是 2024 年 11 月的"
• 缺乏明确的版本迭代计划和社区沟通

与 Ant Design React 的差距

Ant Design React 已进入 5.x/6.x 时代，带来语义化组件结构、CSS-in-JS 重构、~40% 开发性能提升等重大更新。而 Ant Design Vue 停留在 4.x，两者的设计语言和 API 差距正在扩大。React 版的 v4 维护周期也已结束。

新兴替代：Antdv Next

2026 年 2 月，社区出现了 Antdv Next 项目：

• 定位：对标 Ant Design v6 的 Vue 3 原生组件库，口号"为 Vue 重建 Ant Design v6"
• 理念："真正的 Vue，而不是 React 翻译版"——强调 Vue 3 原生开发体验
• 技术栈：Vue 3 + TypeScript（99.9%）+ CSS-in-JS，支持 Vite、Nuxt、SSR、Electron
• 最新版本：v1.4.0（2026-07-01 发布），28 次发布，1,642 次提交
• GitHub Stars：812+（截至 2026 年中，增长中）
• 官网：https://www.antdv-next.com
• 社区认可：vue-vben-admin 等知名项目已讨论迁移至 antdv-next（issue #7113）
• 现状：全新项目，从零构建，迭代速度快（2026 上半年已发布 28 个版本），已同步 Ant Design v6.5.0 设计更新

与同类库对比

选型建议

适合选择 Ant Design Vue 的场景：

• 团队已有 Ant Design React 项目，需要 Vue 端保持设计一致
• 项目基于 ant-design-vue 4.x 已有大量代码积累，短期内不需要升级
• 团队熟悉 Ant Design 设计语言，偏好其交互风格

需要谨慎评估的场景：

• 新项目且无历史包袱 → 考虑 Element Plus（更活跃）或 Antdv Next（更新的技术栈）
• 需要紧跟 Ant Design 最新设计更新 → React 版与 Vue 版的差距正在扩大
• 对长期维护有较高要求 → 需关注 Antdv Next 的发展或评估 Element Plus 的社区活跃度

发展趋势

• Ant Design Vue 主项目短期内更新前景不明朗，需持续关注社区动态
• Antdv Next 作为新选择值得关注，但尚未达到生产就绪的成熟度
• 在 Vue 3 中后台组件库领域，Element Plus 在国内市场的领先地位进一步巩固
• Ant Design 设计语言本身仍具有强大的影响力，其在 Vue 生态的延续形式可能从"直接移植"走向"Vue 原生实现"