準備

正式開發前需要準備一個IDE，如果是用純記事本的大神請忽略

可以選Sublime和VsCode等，找個自己用過的順手的

反正我都沒用過，跟隨我軟的指令碼我就選VsCode把

在VSCode裡新增一個工程，選定上一章克隆下來的工程資料夾目錄

然後再儲存下工程檔案

開始

Ant Design Pro的前端框架是阿里自己弄的UmiJS

選單配置可以看下官方的文件

它 的選單配置在config的router.config.js資料夾下面

然後我們照著模版配置一個自己的選單

首先需要在src\pages底下建立好目錄所在指向的頁面,至於為什麼必須這樣做

人家UmiJS這麼定義好了目錄的，放別的地方人家打包不認怎麼辦

我新建了一個ConfigManage的資料夾和一個ConfigUpload.js的檔案

react不會，裡面程式碼不會寫，我直接從別的頁面拷貝了一份，去掉了那些看著用不著的

留下了感覺應該用得上的

import React, { PureComponent } from 'react';
 
 
class ConfigUpload extends PureComponent {
 

  render() {
  
    return (
      <div>
         HelloWorld
      </div>
    );
  }
}

export default ConfigUpload;
 

在前面提到的router.config.js資料夾裡增加上對應的選單

不會寫？一個字，抄~

還有比我還小白的前端小白嗎？

{
        path: '/configmanage',
        name: 'configmanage',
        icon: 'dashboard',
        routes: [
          {
            path: '/configmanage/configupload',
            name: 'configupload',
            component: './ConfigManage/ConfigUpload',
          },
        ],
      },
 

圖示icon儲存在哪裡還不知道，先用一個已存在的

儲存下，然後在pages/.umi/router.js的檔案裡你會發現umi自動幫我們根據配置生成了選單配置資訊

{
        "path": "/configmanage",
        "name": "configmanage",
        "icon": "dashboard",
        "routes": [
          {
            "path": "/configmanage/configupload",
            "name": "configupload",
            "component": dynamic({ loader: () => import('../ConfigManage/ConfigUpload'), loading: require('D:/1.Work/1.TFS/你自己的專案/src/components/PageLoading/index').default  }),
            "exact": true
          },
          {
            "component": () => React.createElement(require('D:/1.Work/1.TFS/你自己的專案/node_modules/umi/node_modules/umi-build-dev/lib/plugins/404/NotFound.js').default, { pagesPath: 'src/pages', hasRoutesInConfig: true })
          }
        ]
      },

然後在VScode的根目錄資料夾上右鍵，開啟終端

npm start

把專案跑起來

太棒了，一次成功，我都佩服我自己了

為啥顯示的選單和我們寫的Name不一樣？這是阿里為了適應global，所以選單其實是有語言包的

這個就很明顯了，一箇中文一個英文，配一下~

export default {
  'navbar.lang': '中文',
  'menu.home': 'Home',
  'menu.configmanage': 'ConfigManage',
  'menu.configmanage.configupload': 'ConfigUpload',

export default {
  'navbar.lang': 'English',
  'menu.home': '首頁',
  'menu.configmanage': '配置管理',
  'menu.configmanage.configupload': '配置上傳',

嗯，然後完美的報錯了。。。。。

原來是我只儲存了一個配置檔案，英文的沒儲存，看樣子這是要配對存在的，這個校驗很機智啊，不會漏了某種語言

2個語言配置檔案都儲存後就正常了，噔噔~蹬蹬~

這官方文件介紹選單的部分竟然不告訴我icon在哪裡新增....

也沒告訴我icon有哪些可用。。。。。不開心

看樣子ant design 和ant design pro的文件要結合一起看，誰讓pro是ant design的模版呢~