antd pro/Ant Design Pro 增删改查表单服务器交互快速入门开发附Demo，第一讲之环境搭建

简介

1.Ant Design Pro 是一款支持快速开发的前端框架， 官方首页寥寥几笔你可以在短时间内即可完成前端增删改查的代码，框架源于 蚂蚁金服体验技术部出品，身价还是比较高大上的，缺点是网上资料比较少，本文做为环境入门，订阅博主，后续会添加：Ant Design Pro的面向服务器交互增删改查、基于Token的认证等等，不多说，先看效果图。

环境部署

今天主讲环境搭建与运行，不多说，开始，你的本地环境需要安装 yarn、node 。如果需要教程的可以在下面评论，今后我补充上

1.创建目录

在磁盘任意地方创建个空目录(最好不要中文)，然后进去，按住shift键，鼠标右键空白，可选在此处打开命令窗口或者在此处打开powershell窗口， 强烈建议选择后者！注意下，尽量是管理员用户

2.获取UMI

直接执行

yarn create umi

运行完成，会有一些选择项，不会的可以按我选择
1.选择 > ant-design-pro，也就是直接按回车行了

2.问你选 > Pro V4还是> > Pro V5，直接按回车就行了

3.问你选 > TypeScript还是 > JavaScript ，本文用的是 TypeScript，直接回车就行了。

4.问你积木还是脚手架，直接按回车就行了

5.问你选 > antd@4还是 antd@3 ，直接按回车就行了

6.然后就是等待success就行了

3.安装依赖

输入

npm install

完成了，整个环境搭建完毕，如果有报错请评论

代码运行方式

环境搭建完成后，即可直接运行，查看代码效果
1.输入

npm start

2.打开网站，看看效果，输入提示的local地址：http://localhost:8000，即可看到效果，当然，这些数据是从本地的mock进行加载的，下一个博客将会讲述，如何从服务器API中动态加载数据到前端。

Demo下载地址

下载地址【本文DEMO】
这个demo是我所有依赖下载完成的，直接输入

npm start

即可运行。

过几天下一个博客将会讲述，如何从服务器API中动态加载数据到前端，博主编写不易，感到有帮助的，请点赞加评论6666！！！让我有创作动力！！！！！