本文结构

  • 简介
  • 环境部署
  • 1.创建目录
  • 2.获取UMI
  • 3.安装依赖
  • 代码运行方式
  • Demo下载地址


简介

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

ant design react 表单项的显示与隐藏_Ant Design Pro


ant design react 表单项的显示与隐藏_下载地址_02


ant design react 表单项的显示与隐藏_下载地址_03


ant design react 表单项的显示与隐藏_下载地址_04

环境部署

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

1.创建目录

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

ant design react 表单项的显示与隐藏_antd pro_05


ant design react 表单项的显示与隐藏_antd_06

2.获取UMI

直接执行

yarn create umi

运行完成，会有一些选择项，不会的可以按我选择

1.选择 > ant-design-pro，也就是直接按回车行了

ant design react 表单项的显示与隐藏_antd pro_07


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

ant design react 表单项的显示与隐藏_antd pro_08


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

ant design react 表单项的显示与隐藏_下载地址_09


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

ant design react 表单项的显示与隐藏_下载地址_10


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

ant design react 表单项的显示与隐藏_下载地址_11


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

ant design react 表单项的显示与隐藏_下载地址_12

3.安装依赖

输入

npm install

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

ant design react 表单项的显示与隐藏_Ant Design Pro_13

代码运行方式

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

npm start

ant design react 表单项的显示与隐藏_下载地址_14


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

ant design react 表单项的显示与隐藏_antd_15

Demo下载地址

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

npm start