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

相关推荐
<p style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; color: #313d54; font-size: 16px; background-color: #ffffff;"><span style="font-size: 24px;"><span style="color: #313d54; font-family: Helvetica Neue, Helvetica, Hiragino Sans GB, Arial, sans-serif;"><span style="font-size: 24px;"><span style="margin: 0px; padding: 0px;">“Ant Design Pro v5入门教程”</span>上线了<span style="margin: 0px; padding: 0px;">,2021-11-13</span></span></span></span></p> <p style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; color: #313d54; font-size: 16px; background-color: #ffffff;"> </p> <p style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; color: #313d54; font-size: 16px; background-color: #ffffff;"><span style="font-size: 24px;"><span style="color: #313d54; font-family: Helvetica Neue, Helvetica, Hiragino Sans GB, Arial, sans-serif;"><span style="font-size: 24px;">“基础扩展”</span></span></span>系列<span style="font-size: 24px;"><span style="color: #313d54; font-family: Helvetica Neue, Helvetica, Hiragino Sans GB, Arial, sans-serif;"><span style="font-size: 24px;">上线了,2021-07-18,</span></span></span>主要内容是了解常用功能的基础实现及其内部原理,希望客官们能够<span style="font-size: 24px;">喜欢</span><span style="color: #313d54; font-family: Helvetica Neue, Helvetica, Hiragino Sans GB, Arial, sans-serif;"><span style="font-size: 24px;">。哈哈,</span></span><span style="color: #313d54; font-family: Helvetica Neue, Helvetica, Hiragino Sans GB, Arial, sans-serif;"><span style="font-size: 24px;">不知道和知道不用,不是一会事儿。</span></span></p> <p style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; color: #313d54; font-size: 16px; background-color: #ffffff;"> </p> <p style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; color: #313d54; font-size: 16px; background-color: #ffffff;"><span style="font-size: 24px;">2021年02月01日</span>,<span style="font-size: 24px;">新版升级</span>课程“<span style="font-size: 24px;">Ant Design Pro实战入门教程</span>”已上传发布,希望客官们能够<span style="font-size: 24px;">喜欢<span style="font-size: 16px;">,也希望这套课程能够帮您节省大量的学习时间</span></span>。</p> <p style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; color: #313d54; font-size: 16px; background-color: #ffffff;"> </p> <p style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; color: #313d54; font-size: 16px; background-color: #ffffff;">Ant Design Pro是一个企业级中后台前端/设计解决方案,秉承了 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源。随着设计者的不断反馈,Ant Design Pro将逐步沉淀和总结出更多设计模式和相应的代码实现,进一步提升企业级中后台产品设计研发过程中的用户和设计者的体验。总之,Ant Design Pro是一套基于 React 的中后台管理控制台的脚手架,可以帮助你快速搭建企业级中后台产品原型。</p>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

IT佳佳

给我冲个CSDN会员吧!

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值