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