Ant Design #

Ant Design 是由蚂蚁金服开源的企业级 UI 设计语言和 React 组件库。它提供了一整套高质量的企业级 UI 组件，帮助开发者快速构建美观、易用的 Web 应用。

学习路线 #

第一阶段：基础入门 #

适合零基础开发者，了解 Ant Design 的设计理念和基本使用。

• Ant Design 简介 - 了解 Ant Design 的特点和应用场景
• 安装配置 - 搭建 Ant Design 开发环境
• 第一个应用 - 创建你的第一个 Ant Design 应用
• 设计价值观 - 理解 Ant Design 的设计理念

第二阶段：通用组件 #

学习最常用的基础组件。

• Button 按钮 - 按钮组件的使用
• Icon 图标 - 图标组件的使用
• Typography 排版 - 文字排版组件

第三阶段：布局组件 #

学习页面布局相关组件。

• Grid 栅格 - 24 栅格系统
• Layout 布局 - 页面整体布局

第四阶段：导航组件 #

学习导航相关组件。

• Menu 导航菜单 - 导航菜单组件
• Breadcrumb 面包屑 - 面包屑导航

第五阶段：数据录入 #

学习表单和数据录入组件。

• Form 表单 - 表单组件详解
• Input 输入框 - 输入框组件
• Select 选择器 - 下拉选择组件

第六阶段：数据展示 #

学习数据展示相关组件。

• Table 表格 - 表格组件详解
• List 列表 - 列表组件
• Card 卡片 - 卡片组件

第七阶段：反馈组件 #

学习用户反馈相关组件。

• Message 全局提示 - 全局提示消息
• Modal 对话框 - 模态对话框
• Notification 通知 - 通知提醒框

第八阶段：高级主题 #

掌握 Ant Design 的高级功能。

• 主题定制 - 自定义主题样式
• 国际化 - 多语言支持
• ConfigProvider 全局配置 - 全局配置组件

第九阶段：最佳实践 #

学习企业级开发规范和技巧。

• 项目结构 - 代码组织规范
• 性能优化 - 性能优化技巧
• TypeScript 支持 - TypeScript 集成

技术栈概览 #

Ant Design 技术栈
├── React 18+        基础框架
├── Ant Design 5.x   UI 组件库
├── TypeScript       类型支持
├── React Router 6   路由管理
├── dayjs            日期处理
└── Vite             构建工具

前置知识 #

学习本指南前，建议具备以下基础：

• HTML/CSS 基础
• JavaScript ES6+ 语法
• React 基础知识
• 基本的命令行操作
• Node.js 基础知识

学习建议 #

1. 循序渐进：按照章节顺序学习，打好基础
2. 动手实践：每学完一章，动手编写代码
3. 深入理解：理解设计理念，而非死记 API
4. 项目驱动：通过实际项目巩固知识

版本说明 #

本指南基于 Ant Design 5.x 编写，推荐使用最新稳定版本。

组件分类 #

Ant Design 提供了丰富的组件，按功能分类如下：

开始你的 Ant Design 学习之旅吧！