Antd Pro recently released pro V4 version, just happened to have a project to open, incidentally to use.

First, let’s talk about the changes and feelings of Pro after upgrading:

  1. The document menu structure has changed and become clearer. Pro V4 organizes part of the menu into the Build and Deploy and Development directories, which makes it easier to find documents based on development status.

  2. Use the UMI to install Ant-Design-Pro, and use the UMI to build other scaffolding

  3. After installation, the development framework is only the most basic framework, unlike Pro V1 and Pro V2, which have a lot of written page demo, which means that there is no need to delete delete at the early stage of development. The previous delete delete often delete the components that need to be used, and then go to the trash can to restore the relevant files after reporting errors.

  4. Does this also mean that it is impossible to modify the original demo page?

    Antd Pro has already figured out that the path of the current block (i.e. the current page module) can be found in the preview website, and this block can be added to the project route by command, just as before, it can be modified and developed in the original demo.

    But! I didn’t find the so-called view link button on the preview site.

  5. Fortunately, you can fetch all blocks again with the command NPM run fetch: Blocks. I did something stupid: create a new folder, re-install the scaffolding, grab all the blocks in the scaffolding, and copy the relevant pages into the project when needed.

  6. The updated Pro wraps some of the components in the original V1 / V2 component into a dependency package (@ant-Design/Pro-layout), which is much simpler

  7. Pro has also changed the routing Settings, unlike v1, which needs to be configured with router.js models:

    '/': { component: dynamicWrapper( app, ['user', 'login'], () => import('.. / layouts/BasicLayout '),),},Copy the code

    In addition, write the name and path corresponding to the menu in menu.js to set the target of route jump:

     const menuData = [
 {
     name: 'xxx',
     icon: 'xxx',
     path: 'xxx',
     authority: 'xxx',
     children: [
       {
         name: 'xxx',
         path: 'xxx',
         authority: 'xxx',
       },
     ],
   },
 ]
Copy the code

    Starting from V2, you only need to configure paths, components, names, and ICONS.

     [
     {
         path: '/',
         component: '../layouts/BasicLayout',
         Routes: ['src/pages/Authorized'],
     }
 ]
Copy the code

    The menu names are managed in locales/ zh-cn /menu.js.

    The logic is much cleaner and more international (menu names can be more easily set according to regional language needs).

  8. The original REQUEST logic in V1 / V2 is also packaged, encapsulated in UMi-Request (API), exposing some methods so that we can still handle exceptions and add the default parameters when the request, encapsulating the content that is not often changed, making the logic of this file more clear.