Ant Design Pro 入门

发表于 分类于 ， 阅读次数： ：

1 And Design Pro 是什么？

And Design Pro(官网)，我们一般也将之简称为 antd pro，是Ant Design 的升级版。如果你接触过Ant Design（常简称之为 antd），antd 是基于Ant Design 设计体系的React UI 组件库，主要用于研发企业级中后台产品。

而 antd pro 则在其之上，增加了 umiJS 的扩展加成，提供了路由、国际化、权限管理等功能，从而成为一整套企业级的中后台前端解决方案，从 AntD 官网介绍可以看出：

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

也就是说，And Design Pro 是不仅是一套前端开发框架，更是一整套的中后台前端解决方案，在力求提供开箱即用的开发体验，为此我们提供完整的脚手架，涉及国际化，权限，mock，数据流，网络请求等各个方面。为这些中后台中常见的方案提供了最佳实践来减少学习和开发成本。

本章我们会了解 antd pro 的大概，了解antd pro是什么、目录结构大概，然后创建一个基础项目并运行之。

2 目录结构

antd pro 默认生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

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

其中， pages 为业务页面入口，如下 antd pro 也作了推荐规范：

2.1 页面代码结构

为了让项目代码组织更加规范，让开发能够更方便的定位到相关页面组件代码，我们定义了一套规范，该规范当前只作为推荐的指导，并非强制。

页面代码结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
src
├── components
└── pages
    ├── Welcome        # 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
    |   ├── components # 对于复杂的页面可以再自己做更深层次的组织，但建议不要超过三层
    |   ├── Form.tsx
    |   ├── index.tsx  # 页面组件的代码
    |   └── index.less # 页面样式
    ├── Order          # 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
    |   ├── index.tsx
    |   └── index.less
    ├── user           # 一系列页面推荐通过小写的单一字母做 group 目录
    |   ├── components # group 下公用的组件集合
    |   ├── Login      # group 下的页面 Login
    |   ├── Register   # group 下的页面 Register
    |   └── util.ts    # 这里可以有一些共用方法之类，不做推荐和约束，看业务场景自行做组织
    └── *              # 其它页面组件代码

3 创建一个基础项目

创建一个基础 antd pro 项目（老方式）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 创建基础项目
yarn create umi myapp
> 选 ant-design-pro 项目

# 安装依赖
cd myapp
yarn install

# 可选，安装 开发模式小气泡，方便添加区块和模版等pro资产
yarn add @umijs/preset-ui -D

# 运行
yarn start

# 根据提示打开浏览器，进入项目页面

AntD Pro 官网有新的初始化项目方式，当前应该更推荐此新方式：

创建一个基础 antd pro 项目（新！）
1
2
3
4
5
6
7
$ npm i @ant-design/pro-cli -g
$ pro create my-app


$ cd my-app
$ yarn
$ yarn start # 打开浏览器访问 http://localhost:8000

执行完项目后，会在当前目录新建一个基础 antd pro 工程，恭喜你，你的第一个 AntD Pro 项目就这样轻而易举地跑起来了！

4 附录

下面记录一些常用到的网站、工具、优秀的文章等汇总：

  • umi 插件
    • ==》链接
    • plugin-access，权限管理
    • plugin-analytics，统计管理
    • plugin-antd，整合 antd UI 组件
    • plugin-initial-state，初始化数据管理
    • plugin-layout，配置启用 ant-design-pro 的布局
    • plugin-locale，国际化能力
    • plugin-model，基于 hooks 的简易数据流
    • plugin-request，基于 umi-request 和 umi-hooks 的请求方案