ant-design-pro 升级到 v4 后的变化

最近 antd pro 新出 pro v4 版本，恰好有个项目要开启，顺便就给用上了。

先说说升级后 pro 的变化以及给个人感觉：

1. 文档菜单结构变了，变得更加清晰。pro v4 把部分菜单整理到“构建和部署”、“开发”目录中，这样子会更容易根据开发状态来找到须要的文档。

2. 经过 umi 来安装 ant-design-pro，同时也能够经过 umi 来搭建别的脚手架

   

3. 安装后的开发框架只是最基础的框架，并不像 pro v1 和 pro v2 那样拥有不少已经写好的页面 demo，这意味着开发初期不再用删删删，之前的删删删还常常把须要用到的组件删除，报错之后再去垃圾桶里把相关文件恢复回来。

4. 那这是否是也同时意味着若是要拿原来的 demo 页面进行修改就不可能了呢？

   antd pro 已经帮咱们想好了，说是在预览的网站中能够找到当前区块（也就是当前页面模块）的路径，经过命令能够将此区块添加到项目路由中，就和之前同样能够在原有 demo 里进行修改开发。

   可是！我并无在预览的网站中找到所谓的查看连接的按钮。

   

5. 幸亏能够经过命令 npm run fetch:blocks 能够再次获取到全部的区块。 我用了比较蠢的方法：再新建个文件夹，从新安装脚手架，在这个脚手架里获取全部的区块，在须要用的时候 copy 相关页面到项目中来修改。

6. 升级后的 pro 将原来 v1/v2 自带的 component 里的一些组件都封装进了依赖包中（@ant-design/pro-layout），显得更加简洁了

7. 升级后的 pro 对于路由的设置也作了修改，不像 v1 须要在 router.js 里配置上相关的 model：

   '/': {
        component: dynamicWrapper(
            app, 
            ['user', 'login'], 
            () => import('../layouts/BasicLayout'),
        ),
    }，
   复制代码

   还要另外在 menu.js 中写上菜单对应的名称、路径用来设置路由跳转的目标：

   const menuData = [
    {
        name: 'xxx',
        icon: 'xxx',
        path: 'xxx',
        authority: 'xxx',
        children: [
          {
            name: 'xxx',
            path: 'xxx',
            authority: 'xxx',
          },
        ],
      },
    ]
   复制代码

   从 v2 开始，只须要配置上路径、组件、名称、图标等：

   [
        {
            path: '/',
            component: '../layouts/BasicLayout',
            Routes: ['src/pages/Authorized'],
        }
    ]
   复制代码

   而菜单名称则统一到文件 locales/zh-CN/menu.js 中管理了。

   逻辑简洁清晰不少，并且还更国际化（能够更方便地根据不一样地区语言需求设置菜单名称）。

8. 原来 v1/v2 中的 request 逻辑也被包了起来，封装到 umi-request（API） 中，暴露了一些方法让咱们依旧能够处理异常以及添加请求时的默认参数，将不常常改动的内容封装起来，使得这个文件的逻辑更加清晰明了。