阿里开源项目之Ant Design Pro

本篇文章主要包含的内容有三个方面。

第一、Ant Design Pro简介;

第二、Ant Design Pro能做什么;

第三、初步使用;

我相信通过这三个方面的讲解能让你大概知道Ant Design Pro是个什么玩意，同时也能通过小Demo提升学习信心。

一、Ant Design Pro简介

Ant Design Pro是一个开箱即用的中台前端/设计解决方案。

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 git@github.com: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

个人觉得之所以要参考官网是因为官网通常示例很全面，文档很详细，与现在不少博客的文章质量相比，官网的质量还是很不错的。这也是我建议初学者尽量不要去看一些博客，因为考虑到有些人写的博客文章质量实在有些差。包括我自己也不能完全说我写的质量很好，但是有一点我还是很有把握的，那就是贴的源代码示例运行都没有问题，而且很多心得都是我在开发中积累的经验，让我感触很深。

cmd运行的结果如图所示:

说明了会自动帮你构建用webpack打包。

最终的运行效果应该是这样的，如图所示:

小结:

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

本文主要参考Ant Design Pro 官方网站部分内容