Antdv Next v1.0 发布：一次“为 Vue 重建 Ant Design v6”的工程实验

经历了多次技术迭代，也经历了无数次“要不要继续”的心理斗争，我们终于完成了基于 Ant Design v6 设计体系 的 Vue 组件库重构 —— Antdv Next。

致谢

这个项目从一开始就不是一个人的战斗。

在开发过程中，我们也无数次怀疑过： 这件事到底有没有意义？值不值得继续？能不能真的走到最后？

是大家在工作之余持续投入的时间、精力和信任，让这个“看起来不太可能完成”的想法，一点点变成了现实。

最终我们真的把它做完了，也证明了这条路是走得通的，所以我把致谢放到了最前面，希望大家看到这是我们共同的成果。

感谢你们的坚持、耐心和陪伴，没有你们，就不会有今天的 Antdv Next。

• @selicens
• @cc-hearts
• @ffgenius

同样我也要感谢在这个过程中给我们提交问题、建议和 PR 的社区朋友们！

---

为什么要做 Antdv Next？

很早开始接触 Ant Design，就被它完整、严谨、系统化的设计语言深深吸引。 不管是视觉规范、组件一致性，还是 Design Token 的工程化落地，它始终是国内最具代表性的设计系统之一。

因此，在 Vue 项目中，我们也长期优先选择 Ant Design Vue。

但现实是残酷的：

• 维护节奏逐渐放缓
• PR 合并周期拉长
• Issue 长期悬而未决

与此同时，Ant Design 官方开始推进 v6 架构，全面引入 Design Token、CSS 变量、运行时样式系统。这让我们第一次清晰地看到：

UI 框架的“下一代形态”，已经和过去完全不同。

于是，一个念头开始发酵：

与其等一个慢慢老去的分支，不如重新站在源头之上。

最终，我们决定： 基于 Ant Design v6 设计体系，从零重建一套真正面向 Vue 的组件库。

这就是 Antdv Next 的起点。

---

我们做的不是“Antdv 的下一个版本”

这是一个必须讲清楚的事实：

Antdv Next 并不是 Ant Design Vue 的升级版。

我们是直接以 Ant Design v6（React）作为源设计体系，再结合 Vue 的使用范式重新实现。

这意味着：

• API 不会 100% 对齐 Antdv
• 设计哲学来自 Ant Design
• 工程实现为 Vue 原生模式

这也是为什么我们提供了明确的迁移文档，但同时也不建议已经稳定运行的项目盲目迁移。

---

设计调整：让 API 更像 Vue

1. 去 React 味

在 Ant Design 中，大量 API 带有明显的 React 语义，例如：

classNames
rootClassName

在 Antdv Next 中，我们统一调整为：

• classNames → classes
• rootClassName → rootClass

这是一次“语义层”的去 React 化： 不是为了区别，而是为了让 Vue 用户读起来更自然。

---

2. 插槽优先，而不是 children 模型

React 使用 children 作为内容承载模型。 Vue 有插槽，这是语言级的能力。

因此在 Antdv Next 中：

• 插槽是第一公民
• props 渲染仍然支持（兼容 JSX / TSX 用户）

并且，我们统一了一套渲染语义：

语义	插槽名
标签渲染	labelRender
内容渲染	contentRender
扩展区域	extraRender
图标渲染	iconRender
...	...Render

这套命名将成为整个库的长期规范。

---

3. 单一上下文参数模型

在 React 中常见这样的渲染函数：

(originNode, extra) => ReactNode

在 Antdv Next 中，我们统一为：

(ctx: {
  originNode: VueNode
  extra: {
    OkBtn: VNode
    CancelBtn: VNode
  }
}) => VNode

这样做的好处是：

• 无参数顺序依赖
• 语义更清晰
• 更适配 Vue 插槽上下文模型

---

样式系统：CSS-in-JS + 零运行时

我们同步了 Ant Design v6 的 cssinjs 架构，并做了两层优化：

1. 零运行时模式（zeroRuntime）

   • 提供静态 antd.css
   • 运行时只更新 CSS 变量
   • 不再全量替换 <style>

2. 非零运行时

   • 按需注入样式
   • 切换主题仅更新变量
   • 避免整棵样式树重建

目标只有一个： 性能不再因为主题系统而成为瓶颈。

---

表格与表单的工程取舍

表格

• 兼容 bodyCell / headerCell
• 支持虚拟滚动
• 默认浅响应式模型

如果你在表格中使用：

v-model="record.xxx"

这类写法需要迁移，因为内部是浅响应式代理。

这是一次为了性能与一致性做出的取舍。

---

表单

• 移除 a-form-rest
• 兼容 Antdv 原有用法
• API 尽量保持稳定

---

AI 支持：让文档真正“可被机器理解”

我们不仅支持：

• llm.txt
• llm.full.txt

还支持 Agent Skills 模型：

pnpx skills add antdv-next/skills

配合 antfu/skills 使用，可以：

• 按需加载组件知识
• 避免一次性消耗大量 token
• 减少 AI 幻觉

这是我们对“AI 友好型文档系统”的一次工程实验。

---

基础生态

• Icons：icons
• UnoCSS / Tailwind 主题预设：css-plugin
• Auto Import Resolver：auto-import-resolver
• 快乐工作主题：happy-work-theme

后续计划

后续我们最主要的工作重点:

1. 继续优化支持一些在vue下更合理的使用方式;
2. 支持nuxt;
3. 继续优化项目文档。

这是我们目前的一些计划，如果您有新的想法，也可以在github上给我们提交Issue和建议

---

写在最后

Antdv Next v1.0 并不意味着完成，而是我们终于敢对外说：它可以被使用了。

如果你在使用过程中遇到问题，请通过 Issue 反馈。 如果你愿意参与共建，请提交 PR。

这是一个长期工程，不属于某个人，它属于社区，如果后续真的发生了我因为某些原因无法继续维护的时候，

我寻找在我们团队成员中寻找下一位接任者，把所有权限都放给他，做到无缝交接，希望这个项目能真正的持续下去。

---

项目地址

• 组件站点：antdv-next.com
• GitHub：github.com/antdv-next/…

如果你愿意，点一颗 ⭐，感谢您的支持！😊