Antd Pro食用笔记（一）——基本使用

Antd Pro官方文档地址： Antd Pro 文档
此篇涉及到的配套技术文档：

• ProLayout
• UmiJS

一、初始化一个antd pro项目（官网步骤）

1.1 安装

官网的安装步骤：

1. 新建一个空的文件夹作为项目目录，并在目录下执行：
   yarn create umi or npm create umi
2. 选择 ant-design-pro：

   Select the boilerplate type (Use arrow keys)
   ❯ ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
     app             - Create project with a simple boilerplate, support typescript.
     block           - Create a umi block.
     library         - Create a library with umi.
     plugin          - Create a umi plugin.
   

   Ant Design Pro 脚手架将会自动安装。

【TIPS】我安装的时候还额外询问了安装TS or JS版本、simple or complexe版本，我选的是JS版本，然后simple和complexe版本我各下了一份（用complexe来做参考和备份）。

1.2 目录结构

成功初始化后的项目目录结构如下：

├── 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

需要说一下的是config目录：

config
├── config.dev.js		// 开发环境的一些配置，大部分时候不需要动
├── config.js			// umiJS的配置：包含dva、国际化、主题色、路由、代理等
├── defaultSettings.js	// 对项目界面及iconfont的配置：导航主题、主题色、布局、页面标题、iconfont路径等，即官网预览项目右边设置按钮所设置的内容
├── proxy.js			// 请求的代理【后面讲服务器交互时介绍】
└── routes.js			// 路由的配置【配置好后将文件导出到config.js中配置给：routes。如果路由不复杂可以直接在config.js中配置】

我们的主要业务逻辑大部分都在src目录下，官方也给出了推荐的src目录代码结构：

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    // 这里可以有一些共用方法之类，不做推荐和约束，看业务场景自行做组织
    └── *              // 其它页面组件代码

1.3 使用

项目成功跑起来之前还需要按照package.json文件将依赖安装到本地：npm install
之后就可以通过npm run dev或者yarn start跑起来了

二、新建页面

在 config/routes.js文件中配置新页面的路由：
路由的具体配置可参见umiJS官方文档：路由配置

{
   
	path: '/index',				// 路径配置
	name: 'indexTrader',		// 菜单项名字&页面title名字，如项目需配置国际化则需要与国际化文档保持一致
	icon