《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开箱即用的中后台前端设计解决方案——Ant Design Pro。

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。

特性

• TypeScript: 应用程序级 JavaScript 的语言
• 区块: 通过区块模板快速构建页面
• 优雅美观：基于 Ant Design 体系精心设计
• 常见设计模式：提炼自中后台应用的典型页面和场景
• 最新技术栈：使用 React/umi/dva/antd 等前端前沿技术开发
• 响应式：针对不同屏幕大小的设计
• 主题：可配置的主题满足多样化的品牌诉求
• 国际化：内建业界通用的国际化方案
• 最佳实践：良好的工程实践助您持续产出高质量代码
• Mock 数据：实用的本地数据调试方案
• UI 测试：自动化测试保障前端产品质量

支持环境

项目体验

分析页

监控页

表单

搜索列表

查询表格

流程编辑器

脑图编辑器

个人页

使用

初始化脚手架：

# 使用 npmnpm i @ant-design/pro-cli -gpro create myapp                        

选择 umi 的版本：

?  使用 umi@4 还是 umi@3 ? (Use arrow keys)❯ umi@4  umi@3                

如果选择了 umi@4 版本，暂时还不支持全量区块。

如果选择了 umi@3，还可以选择 pro 的模板，pro 是基础模板，只提供了框架运行的基本内容，complete 包含所有区块，不太适合当基础模板来进行二次开发

?  要全量的还是一个简单的脚手架? (Use arrow keys)❯ simple  complete                        

安装依赖：

$ cd myapp && tyarn// 或$ cd myapp && npm install                                

启动服务：

npm 	run start

-END-

开源协议：MIT

开源地址：
https://github.com/ant-design/ant-design-pro