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

时间:2024-03-26 11:35:42

一、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介绍与使用

小结:

Ant Design Pro这个阿里巴巴的开箱即用的框架,我并没有在实际开发中用过,仅仅只是初步的Demo玩玩。不过后续可能考虑要用。