react+antd+dva+umi入门

首先创建一个项目，官网地址 https://ant.design/docs/react/practical-projects-cn
安装yarn，在命令行中输入 'yarn create umi',生成文件中的.umirc即为配置文件，但我们会把这个文件删了，然后新增一个config文件夹里面的config的文件作为配置文件，在src中新建models和service两个文件夹，公共的组件可以放在components文件夹里面，如下图：

image

service#层：发送请求，获取数据

import request from '@/utils/request';

export async function ×××××(param) {
return request(${url}sys/dic?${stringify(param,{arrayFormat: 'repeat'})}, {
method: 'GET',
});
}

models#层：

引入对应的service文件夹中的文件
import { ×××，×××，××× } from '@/service/×××';

image

定义的namespace是唯一，不可重复，effects:定义的方法是通过调用service里面的方法请求后台接口
reducers:里面定义的方法是对models层中的state里面的数据进行的操作。

page#页面

image

在每个子页面中，通过connect连接models层的方法，子页面发送请求时
this.props.dispatch({
type:"namespace名称/models定义的方法名称",
payload:{}//带的参数
})