使用antd开发后台管理前端

这一篇主要用来记录使用antd开发后台管理的前台页面步骤和遇到的坑

原因

不用现成的antdPro，而是用antd开发，有以下几方面的原因：

1. antdPro启动速度太慢，修改一个东西好，要加载好半天才能刷新出来
2. 很多东西感觉封装的过度了，增加了学习成本，但是不可否认，确实减少了大量的重复代码

开始使用antd

0. 先介绍一款好用的工具，tyarn，自动配置了国内的源，用法跟yarn一样，速度很快
1. 创建react项目

tyarn create react-app antd-admin

2. 引入antd

tyarn add antd

目前的antd版本是4.16.13，需要将less-loader降版本到5，否则会报错，希望以后会解决这个问题，less-loader降到版本5后，使用 @antd/pro-layout 也会报类似的错，不知如何解决，知道怎么解决的老兄指点一下，谢谢。

3. 引入axios，作为网络请求工具

tyarn add axios

使用axios，最好创建实例，在实例里修改需要的配置，防止全局修改配置，污染其他请求

4. 安装react路由库

tyarn add react-router-dom

5. 配置代理，目前在package.json配置代理，只支持字符串格式，不支持对象，对于复杂点的代理，不能满足，官方推荐使用 http-proxy-middleware 来配置代理，本人没有安装这个，而是暴露出webpack配置，执行命令 tyarn eject 即可暴露出webpack配置文件，直接在webpack配置里面进行代理的配置，配置文件为 config/webpackDevServer.config.js ，修改proxy属性即可配置，下面是我的代理配置

proxy: {
      "/api": {
        "target": "http://localhost:8442/",
        "changeOrigin": true,
        "pathRewrite": {
          "^/api": ""
        }
      },
      "/img": {
        "target": "http://localhost:8001/",
        "changeOrigin": true,
        "pathRewrite": {
          "^/img": ""
        }
      },
      "/baiduApi": {
        "target": "http://api.fanyi.baidu.com",
        "changeOrigin": true,
        "secure": false,
        "pathRewrite": {
          "^/baiduApi": ""
        }
      }
    },

项目中用到了百度翻译的api，很多这种api是不支持跨域的，因此在这里配置个代理，即可解决实际跨域的问题，在发布时，同样在nginx里面做一个代理，

location /baiduApi {
	proxy_pass http://api.fanyi.baidu.com;
	rewrite "^/baiduApi/(.*)$" /$1 break; 
}

至此，基本环境就搭建好了，可以愉快的开发了，对于后续的坑，本人遇到了再做补充。