前言

Ant Design 简称为 Antd

antd 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践。除了官方组件，我们也提供了社区精选组件作为必要的补充，另外如果您是内网用户，

提示：以下是本篇文章正文内容，下面案例可供参考

一、AntD是什么？

antd 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践。除了官方组件，我们也提供了作为必要的补充，另外如果您是内网用户

二、组件预热

1.通用、导航、数据输入、数据展现、反馈、其他

2.整体效果预热

可以看出Antd的整体页面分格和React Admin比较相似，页面抬头和左边是菜单右边是页面导航，导航下面是页面窗口，加上定制的主题窗口，基本可以完成一个页面的主题功能实现

3.快速搭建环境

先查看线上的部署的版本

将代码放到本地试试可以运行

模板的内容

## 模板

```
- Dashboard
- 分析页
- 监控页
- 工作台
- 表单页
- 基础表单页
- 分步表单页
- 高级表单页
- 列表页
- 查询表格
- 标准列表
- 卡片列表
- 搜索列表（项目/应用/文章）
- 详情页
- 基础详情页
- 高级详情页
- 用户
- 用户中心页
- 用户设置页
- 结果
- 成功页
- 失败页
- 异常
- 403 无权限
- 404 找不到
- 500 服务器出错
- 帐户
- 登录
- 注册
- 注册成功
```

本地安装

资源 - Ant Design 下载zip文件解压后文件目录集

先看了一下README.cn的文件，直接进行安装，安装比较简单，直接用npm install就OK

我的安装非常多的WARN，怀疑大量的版本冲突。先安装试试看，也不知道可以启动上面的例子吗？

自动安装了最新版本ant-design-pro@6.0.0-beta.1 postinstall

ant-design-pro@6.0.0-beta.1 start
> cross-env UMI_ENV=dev max dev

Hello PRO
info  - [你知道吗？] 如果想检测未使用的文件和导出，可尝试新出的 deadCode 配置项，详见 https://umijs.org/docs/api/config#deadcode
Using openapi Plugin
info  - Umi v4.0.36
info  - MFSU eager strategy enabled
event - [MFSU][eager] start build deps
info  - [MFSU] buildDeps since cacheDependency has changed
        ╔════════════════════════════════════════════════════╗
        ║ App listening at:                                  ║
        ║  >   Local: http://localhost:8000                  ║
ready - ║  > Network: http://192.168.31.36:8000              ║
        ║                                                    ║
        ║ Now you can open browser with the above addresses↑ ║
        ╚════════════════════════════════════════════════════╝
Hello PRO
Using openapi Plugin
info  - [MFSU][eager] worker init, takes 4592ms
info  - [MFSU][eager] build worker start to build
event - [Webpack] Compiled in 9366 ms (519 modules)

先用6.0.0 跑跑试试