简介

工作室web端相关项目采用Ant Design Pro构建。

那么什么是Ant Design Pro呢？

在很多大型项目，特别是多人协作的项目，会存在很多项目规范和常用工具，组件，布局，配置，Ant Design Pro就是阿里基于项目实践，持续迭代，逐步沉淀和总结推出的一个项目模板。

Ant Design Pro官方文档：
https://pro.ant.design/docs/getting-started-cn

Ant Design Pro 的目录结构如下：
image.png
这份目录存在三个重要的知识点：配置，数据流，接口请求，之后会有具体介绍。

开始使用

  • 新建一个空目录，在项目目录下运行命令（可以使用vscode命令工具）

    1. yarn create umi

  • 选项如下

image.png

  1. yarn
  2. yarn start

这种情况下会运行一个Ant Design Pro案例项目，在学习Ant Design Pro可以多参照着文档进行改动，测试。

配置

Ant Design Pro采用约定式路由，目前脚手架中所有的路由都通过 [config.ts](https://github.com/ant-design/ant-design-pro/blob/33f562974d1c72e077652223bd816a57933fe242/config/config.ts) 来统一管理。

需要给route节点配置一个类似于这样的数据。

  1. [
  2.   {
  3.     "path": "/dashboard",
  4.     "name": "dashboard",
  5.     "icon": "dashboard",
  6.     "children": [
  7.       {
  8.         "path": "/dashboard/analysis",
  9.         "name": "analysis"
  10.       },
  11.       {
  12.         "path": "/dashboard/monitor",
  13.         "name": "monitor"
  14.       },
  15.       {
  16.         "path": "/dashboard/workplace",
  17.         "name": "workplace"
  18.       }
  19.     ]
  20.   }
  21.   // ....
  22. ]

页面路由注册好了之后，跳转方式也提供以下两种

  1. import { history } from 'umi';
  3. history.push('/dashboard/anyParams');
  5. //or
  7. import Link from 'umi/link';
  9. <Link to="/dashboard/anyParams">go</Link>;

有关Link更多文档：https://umijs.org/zh-CN/api#link
有关History更多文档：https://umijs.org/zh-CN/api#history

数据流

image.png
Ant Design Pro数据流方案采用dvajs，具体数据流表示如上图。

首先route components就是指页面级组件，即注册到路由上的页面，所有的数据变动由页面dispatch触发action，model中的effect处理action，然后调用reducer将改变后的数据更新到state。

整个的数据流向可以类比vuex中的action -> mutation -> state。

我们从后台获取的接口数据都会通过这种方式处理。

具体操作可以参考文档：https://dvajs.com/

接口

需要了解graphql相关知识：https://graphql.cn/learn/
其他知识需要通过具体项目掌握。

样式

Ant Design Pro采用less预处理器

less和sass的区别可以看：https://juejin.cn/post/6844904169313140749

更多

Ant Design Pro官方文档比较简洁，主要是介绍如何使用，如果想要更深入地了解，可以看看它的主要依赖项：umi和dvajs。
umi：https://umijs.org/zh-CN/docs，主要是配置和路由相关的东西，有疑惑的地方可以再看看。
dvajs：https://dvajs.com/，主要是数据流相关的东西，想了解更多的可以看下。