Ant Design 使用指南：国内企业级中后台事实标准，蚂蚁开源 MIT 授权

Ant Design 由蚂蚁集团开源，是国内企业级中后台几乎绕不开的组件库。它的强项不只是组件多，而是把一套设计语言、设计资源和中后台常见模式一起打包给了你。

它解决什么问题

中后台项目最怕样式不统一、组件各写各的。AntD 用一套设计语言把表格、表单、树形这些高频控件做成开箱即用，团队少踩很多重复的坑。

但它风格主张同样强：默认就是那套蓝白中后台调性。想做差异化品牌界面要大量覆写；v5 用 CSS-in-JS，构建与运行时也有一定开销。

核心能力

包体积与按需引入

AntD 组件全，但全量引入体积不小。生产环境建议用官方推荐的按需引入（如 babel 插件或 ES 模块的 tree-shaking），只打包用到的组件。

v5 改为 CSS-in-JS 后，样式在运行时生成，首屏会有一点点注入开销；对性能敏感的场景可关注官方提供的静态提取 CSS 方案，把样式提前落到产物里。

同类工具怎么选

谁适合用

• 做 B 端中后台、内部系统，需要成熟表格表单的团队
• 国内团队，需要中英双语文档与中文社区支持的项目
• 要把设计和开发对齐到同一套规范的产品经理与工程师

怎么开始

1. 用 npm install antd 安装，React 18+ 项目直接可引入组件。
2. 在应用根用 ConfigProvider 包裹，可传 locale 设中文、theme 改主题。
3. 按文档引入具体组件（如 Table、Form），用组件 props 配置列与校验。
4. 需要设计稿就下载官方 Figma / Sketch 资源，和代码组件一一对应。
5. 生产构建开启按需引入与 tree-shaking，控制最终打包体积。

常见问题

真的完全免费吗？
核心库 MIT，可商用不收费；官方另有 Ant Design Pro 等付费模板，但那不是组件库本体。

和 Material UI 区别？
AntD 偏中后台业务模板、中文生态强；MUI 偏 Material 规范、国际社区大。

v5 性能如何？
CSS-in-JS 带来少量运行时开销，官方提供静态 CSS 提取缓解首屏。

支持 Vue 吗？
AntD 主推 React；Vue 用户可用社区维护的 Ant Design Vue，但非官方同一团队。

授权与合规

Ant Design 以 MIT 授权发布，可免费用于商业项目，无需付费或署名；社区有企业版 Ant Design Pro 模板，但核心组件库本身始终开源免费。 官网：ant.design。