说实话当看到Ant Design Pro官方示例时就会感到它的功能齐全、UI简洁，对于大部分中台系统完全够用，仿佛只要稍加改动就能快速搭建自己想要的系统。对于有React+Antd+dvaJs使用经验的同学来说比较好上手，但对于新手来说可能略有难度，比如dva、umi、Hooks等都需要单独学习，如果你想使用这套技术栈就需要从预备知识开始学习，逐渐上手后你会体验到中台产品开发的高效实践。
Ant Design Pro使用过程中也会遇到七七八八很多的坑，网上讨论的文章不算多，搜索解决方案的时候难免会绕弯路。我个人的开发习惯是：遇到问题最好是仔细阅读官方文档，从中找解决方案。下面记录这次使用ant design pro开发项目时用到的一些有帮助的文档链接，方便需要时快速查找。
环境和安装
首先需要把Ant Design Pro文档添加进你的浏览收藏夹以便随时查看，接着我们就可以按着官方指引开始使用了~
安装node
设置npm镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装yarn
cnpm install -g yarn
使用脚手架
新建一个空的文件夹作为项目目录，并在目录下执行：
yarn create umi
（避坑：yarn比npm快）
选择 ant-design-pro
选择 proV4/V5(我选了v4)
选择 TypeScript/JavaScript(我选了js)
选择 simple/complete(我选了simple)
选择 antd@4/antd@3(我选了antd@4)
安装依赖
cnpm install
启动
npm start
构建
当项目开发完毕，只需要运行一行命令就可以打包你的应用：
npm run build
http-server是一个简单的零配置命令行HTTP服务器，如果想在本地预览构建文件，可以将代码部署在本地，只需要在dist目录下运行
http-server -c-1
至此，一个中台系统的框架就搭好了！
预备知识
想要快速上手，以下为必要知识。
React
假设你没有接触过React,直接使用Ant Design Pro将会有些困难。如果你是不得不接手一个这样的项目，那么至少需要先了解React基础语法。 到React官网开始学习吧~
建议：如果你想快速入门，那么你可以先学习组件、Props、State以及Hook这几个知识点，这样只要你有JS基础就基本可以阅读所接手的项目代码了。
React Redux
假设你没使用过Redux，那你至少需要先了解Redux是一个状态管理中心，最好再学习一下它的入门知识。 推荐 阮一峰老师的《Redux入门教程》
如果你已经了解React Redux的使用那么你只需要基于它再去了解一下DvaJs的概念就可以了。
Ant Design
假设你已经使用过Ant Design那就再好不过了，Ant Design Pro的几个组件都是在AntD 的基础上封装的，你也可以直接在项目中使用AntD组件。
假设你没有使用过AntD也不必着急，类似于所有UI组件库，按照官方文档来使用即可快速上手。
建议：可以先浏览Form、Table、Modal组件示例代码。
相关知识
Hook
如果你习惯编写Class来使用state而不熟悉Hook，那么你需要学习一下它了，ant design pro 示例中很多地方都用到了React Hook ，它是React 16.8 的新特性。
DvaJS
DvaJs可以理解为一个封装了redux+redux saga+react router+fetch的轻量框架。看文档时可以主要关注Model这块，可以看出它简化了原本redux状态管理的复杂写法。
ProComponents 组件
Ant Design Pro中除了使用大家熟悉的antd组件库，更多的是使用进一步封装了预设行为和逻辑的ProComponent，比如框架中的ProTable、ProForm等，为开发节省了不少成本，可以先粗略阅读一下文档中的预设功能再进行开发。
UmiJS
我们可以看到umi官网的介绍很是丰富，倒不必全部阅读，我们可以按需学习~
网络请求处理
如果你想修改前后端通信请求的统一处理，那么可以通过阅读umi-request文档了解如何使用缓存、超时、 字符编码处理、 错误处理等功能。
工程中关注src\utils\request.js文件
mock
在没有前后端联调前我们往往会在前端模拟数据请求，如果你还不了解如何在前端模拟数据请求，那么可以打开工程目录\mock文件夹，你只需要按照这个目录下的文件去创建你的模拟接口及数据。
如果还想了解更多，那可以搜索一下mock.js。
实践
如何清除不必要的小组件？
在哪更换logo和地址栏图标？
怎么配置代理？
... ...
也许你有这样那样的问题，不防在下面的实战手册中找找答案。
语雀知识库-Ant Design Pro 入门到实战手册-羽旋杯水
写这篇文章的时候看到这位大佬在更新新的指南了，佩服佩服
语雀知识库-Ant Design Pro V4 + React Hooks + Umi 实战教程【2020版】-羽旋杯水
（避坑：大家搜索资料时一定要注意不同版本间的区别，避免因为版本不对绕弯路）
❤️如果文章对你有帮助，就点个赞支持一下吧，Thanks♪(･ω･)ﾉ
