umi+dva+antd+axios搭建项目，跨域代理问题

项目背景：以前学过一些react，但是没有实际写过项目，只了解一些基础的用法，这次正好空闲有时间将一个后台系统改写为react的，来实际操作一下react。深感直接用react写会很累，所以结合现代的流行的框架umi、dva、antd来写。这样写起来也比较轻松，也有成就感。下面开始记录项目搭建的一些过程。

　　一、项目搭建：umi的官网上有说怎么新建一个项目，但是对于我这次的项目搭建不是很合适，于是采用的另一种搭建方式：

1.mkdir myapp && cd myapp

2.npm create umi

3.执行上一步之后，界面出现以下选择

? 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.

4.
? Do you want to use typescript? (y/N)
5.
? What functionality do you want to enable? (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ antd
 ◯ dva
 ◯ code splitting
 ◯ dll
最后一步选择antd和dva，选择后生成了一个文件夹：create，然后进入这个文件夹，使用npm install安装依赖
安装完成之后，启动项目：npm start。此时如果提示报错，可能是umi-plugin-react没有配置好，我重新安装了最新的依赖："@umijs/preset-react": "^1",然后再删除了原有的.umirc.js配置文件，新建config文件夹，
在下面建立config.js文件，在里面配置：

 1 export default {
 2   base: '/',
 3   plugins: [
 4     ['umi-plugin-react', { // 主要是这个配置，我曾按照最新的方式直接配置 antd：{}和dva：{}结果还是报错，这样就不报错了。
 5       antd: true,
 6       dva: {
 7         hmr: true
 8       },
 9       dynamicImport: {
10         webpackChunkName: false,
11         // loadingComponent: './components/PageLoading/index'
12       },
13       locale: {
14         enable: true, // default false
15         default: 'zh-CN', // default zh-CN
16         baseNavigator: true, // default true, when it is true, will use `navigator.language` overwrite default
17       }
18       // ...(!process.env.TEST && os.platform() === 'darwin'
19       //   ? {
20       //     dll: true,
21       //     hardSource: true,
22       //   }
23       //   : {}),
24     }],
25     // ['umi-plugin-ecma5-validator', {}],
26   ]
27 }

这一系列配置完成之后，启动项目就看到默认的启动页了。

二、dva的使用

　　dva官方介绍：dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。在umi中使用dva很简单，在安装了dva之后，在src目录下直接新建models文件夹，下面新建app.js，这个文件则是全局的可以在里面配置全局的一些方法。具体看官网和自己的实际需求。然后单独的每个页面的model则可以直接配置在单独的文件夹下，如login文件夹下有：index.js、index.less、model.js，这样在index.js里直接引入dva的connect，不必引入model，框架会自动识别到，然后再导出组件的时候挂载，如下所示：

export default connect(({ login }) => ({ login }))(Login)

这样在组件里的props里就可以拿到我们管理的数据了。model.js里的具体写法参看官网。

三、antd的使用，在安装之后，进行了第一步里的配置之后，则在各个组件里直接引入就可以了，推荐按需引入，如下：

import { Form, Input, Button, Divider, Icon } from 'antd';

四、axios使用和跨域相关问题

终于进入到今天的关键问题了，网上搜了好多关于react里使用axios解决跨域的问题，基本都是说两种方案：

1.在package.json里配置proxy，以对象的方式，记得加双引号。并说明这种方式只适合一个代理的接口。

2.使用http-proxy-middleware，首先安装这个插件，然后在src下面新建setupProxy.js文件，里面配置内容就不多说了，网上一搜一大把。

然而这两种方式我用了都没有任何效果，我觉得是因为我在umi里用的原因，然后突然看到一位小伙伴是在.umirc.js文件下直接配置的proxy，于是我在我的config.js里做了proxy代理，然后点击登录，我的天，简直了，直接就代理成功了，哈哈哈，终于成功了，没想到umi的配置这么简单，我突然很想说一句：umi真香啊！

当然，以上的这些经验主要是由于我没有深入理解这些框架导致的，如果大家比较熟悉这些框架可能不会出现这些问题。总而言之，言而总之，终于可以正常开发了，接下来就是权限方面的难题了。后面再更新。。。

umi+dva+antd+axios搭建项目，跨域代理问题

推荐阅读