一、Ant Design Pro简介
Ant Design Pro 是一个企业级中后台前端/设计解决方案,秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈,我们将持续迭代,逐步沉淀和总结出更多设计模式和相应的代码实现,阐述中后台产品模板/组件/业务场景的最佳实践,也十分期待你的参与和共建。
基于上述目标和提供了以下的典型模板,并据此构建了一套基于 React 的中后台管理控制台的脚手架,它可以帮助你快速搭建企业级中后台产品原型。
Ant Design Pro官网地址:https://pro.ant.design/index-cn
GitHub源码下载地址为:https://github.com/ant-design/ant-design-pro
二、Ant Design Pro能做什么?
语言描述如下:
优雅美观:基于 Ant Design 体系精心设计
常见设计模式:提炼自中后台应用的典型页面和场景
最新技术栈:使用 React/dva/antd 等前端前沿技术开发
响应式:针对不同屏幕大小设计
主题:可配置的主题满足多样化的品牌诉求
国际化:内建业界通用的国际化方案
最佳实践:良好的工程实践助您持续产出高质量代码
Mock 数据:实用的本地数据调试方案
UI 测试:自动化测试保障前端产品质量
三、初步使用
$ git clone [email protected]:ant-design/ant-design-pro.git --depth=1
$ cd ant-design-pro
$ npm install
$ npm start # 打开浏览器访问 http://localhost:8000
更详细的使用和发布可以参考这个网址:https://pro.ant.design/docs/getting-started-cn
关于组件介绍可以参考这个网址:https://pro.ant.design/components/AvatarList-cn
最终的运行效果应该是这样的,如图所示:
小结:
Ant Design Pro这个阿里巴巴的开箱即用的框架,我并没有在实际开发中用过,仅仅只是初步的Demo玩玩。不过后续可能考虑要用。