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） 中，暴露了一些方法讓咱們依舊能夠處理異常以及添加請求時的默認參數，將不常常改動的內容封裝起來，使得這個文件的邏輯更加清晰明瞭。