阿里开源项目Ant Design Pro介绍与使用

一、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玩玩。不过后续可能考虑要用。