Ant Design：蚂蚁企业级 React 设计体系组件库安装与使用指南

一、项目官方信息

Ant Design 是蚂蚁金服开源的企业级 UI 设计语言与 React 组件库，致力于提升中后台产品的设计与开发体验，是国内最流行的 React 组件库之一。

二、官方图片

上图为 Ant Design 仓库在 GitHub 上的社交预览图。

三、环境要求

• React 16.9+；
• Node.js 16+；
• npm/yarn。

四、安装步骤

1. 安装依赖

npm install antd

2. 使用组件

import { Button, DatePicker } from 'antd';

export default function App() {
  return (
    <>
      <Button type="primary">主要按钮</Button>
      <DatePicker />
    </>
  );
}

3. 按需加载

antd v5 默认 ESM 支持 tree-shaking，无需额外配置。

4. 主题定制

import { ConfigProvider } from 'antd';

<ConfigProvider theme={{ token: { colorPrimary: '#1677ff' } }}>
  <App />
</ConfigProvider>;

五、使用方法

• 组件丰富：50+ 企业级组件；
• 设计一致：完整设计语言与设计资源；
• 主题定制：Design Token 换肤；
• 国际化：内置多语言；
• 生态：Ant Design Pro、Ant Design Charts、AntV。

六、常见问题 FAQ

1. Ant Design 是谁开源的？ 蚂蚁金服。

2. 支持 React 几？ React 16.9+。

3. v5 怎么定制主题？ 用 ConfigProvider 的 theme.token。

4. 需要按需引入插件吗？ v5 ESM 自动 tree-shaking。

5. 有中后台模板吗？ 有 Ant Design Pro。

6. 协议是什么？ MIT。

七、跳转链接

• GitHub 仓库：ant-design/ant-design
• 官网：ant.design
• npm：antd