• 写在前面
  • 谁在使用
    • For 设计者
    • For 开发者
  • 前序准备
  • 安装
    • 直接 clone git 仓库
    • 使用命令行工具
  • 目录结构
  • 本地开发

    写在前面

    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.   - 注册成功

    谁在使用

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

    For 设计者

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

    For 开发者

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

    前序准备

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

    安装

    有两种方式进行安装：

    直接 clone git 仓库

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

    使用命令行工具

    你可以使用集成化的命令行工具 ant-design-pro-cli。

    1. $ npm install ant-design-pro-cli -g
    2. $ mkdir my-project && cd my-project
    3. $ pro new  # 安装脚手架

    目录结构

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

    1. ├── mock                     # 本地模拟数据
    2. ├── public
    3. │   └── favicon.ico          # Favicon
    4. ├── src
    5. │   ├── assets               # 本地静态资源
    6. │   ├── common               # 应用公用配置，如导航信息
    7. │   ├── components           # 业务通用组件
    8. │   ├── e2e                  # 集成测试用例
    9. │   ├── layouts              # 通用布局
    10. │   ├── models               # dva model
    11. │   ├── routes               # 业务页面入口和常用模板
    12. │   ├── services             # 后台接口服务
    13. │   ├── utils                # 工具库
    14. │   ├── g2.js                # 可视化图形配置
    15. │   ├── theme.js             # 主题配置
    16. │   ├── index.ejs            # HTML 入口模板
    17. │   ├── index.js             # 应用入口
    18. │   ├── index.less           # 全局样式
    19. │   └── router.js            # 路由入口
    20. ├── tests                    # 测试工具
    21. ├── README.md
    22. └── package.json

    本地开发

    安装依赖。

    1. $ npm install

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

    1. $ npm start

    开始使用 - 图1

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

    首页截图

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