开始使用

写在前面

Ant Design Pro 是一个企业级中后台前端/设计解决方案，我们秉承 Ant Design 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈，我们将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践，也十分期待你的参与和共建。

我们基于上述目标和提供了以下的典型模板，并据此构建了一套基于 React 的中后台管理控制台的脚手架，它可以帮助你快速搭建企业级中后台产品原型。

  1. - Dashboard
  2.   - 分析页
  3.   - 监控页
  4.   - 工作台
  5. - 表单页
  6.   - 基础表单页
  7.   - 分步表单页
  8.   - 高级表单页
  9. - 列表页
  10.   - 查询表格
  11.   - 标准列表
  12.   - 卡片列表
  13.   - 搜索列表（项目/应用/文章）
  14. - 详情页
  15.   - 基础详情页
  16.   - 高级详情页
  17. - 结果
  18.   - 成功页
  19.   - 失败页
  20. - 异常
  21.   - 403 无权限
  22.   - 404 找不到
  23.   - 500 服务器出错
  24. - 个人页
  25.   - 个人中心
  26.   - 个人设置
  27. - 帐户
  28.   - 登录
  29.   - 注册
  30.   - 注册成功

谁在使用

目前蚂蚁金服和阿里巴巴内部上百个项目正在尝试 Pro 的研发模式，如果你和你的组织使用了这个产品，欢迎到 Ant Design Pro Users 留言。

For 设计者

如果你是产品或设计师，你可以找到和 Pro 一一配套的 Axure/Sketch 设计资源，大幅度提升设计效率和沟通效率。

For 开发者

如果你是工程师，在接下来的文档中，我们将具体介绍如何使用这个脚手架。如果你是蚂蚁金服的内网用户，请直接跳到文档 开始使用（蚂蚁金服用户）。

前序准备

你的本地环境需要安装 node 和 git。我们的技术栈基于 ES2015+、React、UmiJS、dva、g2 和 antd，提前了解和学习这些知识会非常有帮助。

安装

从 GitHub 仓库中直接安装最新的脚手架代码。

  1. $ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project -b v2
  2. $ cd my-project

目录结构

我们已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

  1. ├── config                   # umi 配置，包含路由，构建等配置
  2. ├── mock                     # 本地模拟数据
  3. ├── public
  4. │   └── favicon.png          # Favicon
  5. ├── src
  6. │   ├── assets               # 本地静态资源
  7. │   ├── components           # 业务通用组件
  8. │   ├── e2e                  # 集成测试用例
  9. │   ├── layouts              # 通用布局
  10. │   ├── models               # 全局 dva model
  11. │   ├── pages                # 业务页面入口和常用模板
  12. │   ├── services             # 后台接口服务
  13. │   ├── utils                # 工具库
  14. │   ├── locales              # 国际化资源
  15. │   ├── global.less          # 全局样式
  16. │   └── global.js            # 全局 JS
  17. ├── tests                    # 测试工具
  18. ├── README.md
  19. └── package.json

本地开发

安装依赖。

  1. npm install

如果网络状况不佳，可以使用 cnpm 进行加速。

  1. npm start

开始使用 - 图1

启动完成后会自动打开浏览器访问 http://localhost:8000，你看到下面的页面就代表成功了。

首页截图

接下来你可以修改代码进行业务开发了，我们内建了典型业务模板、常用业务组件、模拟数据、HMR 实时预览、状态管理、国际化、全局路由等等各种实用的功能辅助开发，你可以继续阅读和探索左侧的其他文档。