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

wangxj0802
3,895 阅读2分钟

最近 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） 中，暴露了一些方法让我们依旧可以处理异常以及添加请求时的默认参数，将不经常改动的内容封装起来，使得这个文件的逻辑更加清晰明了。

avatar
文章
阅读
粉丝