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!!!让我有创作动力!!!!!

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页