React學習筆記 Ant Design Pro初體驗

題外話：今年聖誕的AntD的彩蛋可能鬧了個笑話，但在做爲看熱鬧的我來講，仍是挺有趣的

傳送門：https://pro.ant.design/index-cn

第一步 你要去Github上面fork Antd pro的項目下來，項目地址：https://github.com/ant-design/ant-design-pro

　　　或者全局安裝集成化的 ant-design-pro-cli 工具

       　npm install ant-design-pro-cli -g

          mkdir pro-demo && cd pro-demo pro new

第二步 使用git clone #你fork後github上的地址#

第三步 項目下載完成後 

npm install 裝載項目

npm start 運行項目

這樣項目就能夠跑起來了

關於目錄

├── config                   # umi 配置，包含路由，構建等配置!
│   - router.config.js  ## 配置定義每一個頁面的佈局、全局菜單的配置
├── mock                     # 本地模擬數據
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地靜態資源
│   ├── components           # 業務通用組件
│   ├── e2e                  # 集成測試用例
│   ├── layouts              # 通用佈局
│   ├── models               # 全局 dva model
│   ├── pages                # 業務頁面入口和經常使用模板
        ├── page01  ##同類型頁面文件夾
            ├── models   ##對應頁面處理數據和邏輯的model
                - page011.js
                - page012.js
                ├── ss
                  - s.js
             - page011.js  ##頁面
             - page012.js
             - page01.less
        ├── page02
            ├── models
                 -page021.js
             - page021.js
        - defaultSettings.js ##頁面默認整體佈局配置
│   ├── services             # 後臺接口服務
│   ├── utils                # 工具庫
│   ├── locales              # 國際化資源
│   ├── global.less          # 全局樣式
│   └── global.js            # 全局 JS
├── tests                    # 測試工具
├── README.md
└── package.json
--------------------- 

 

關於路由的修改

頁面位置位於src/pages中(首先你要有頁面，而後再配置路由裏面的映射關係

路由是由config/router.config.js文件控制

{path:'/',redirect:'/Workplace/Workplace'},
      {
        path:'/Workplace',
        name:'工做臺',
        icon:'laptop',
        routes:[
          {
            path:'/Workplace/Workplace',
            name:'首頁',
            component:'/Workplace/Workplace'
          },
          {
            path:'/Workplace/Analysis',
            name:'統計分析',
            component:'/Workplace/Analysis'
          }
        ]
      }]
}

關於標題

你在主文件頁面下（即document.ejs）修改title是沒有用的，是在src/layouts/BasicLayout.js中找到getPageTitle進行修改

關於logo

LOGO位於src/components/SideMenu/SideMenu.js中，

原先的logo是props傳過來的，因此我在引用logo文件的時候加了import sysLogo from '../../assets/logo.png';避免參數名重複

另外logo圖片文件最好放在src/assets裏面

 關於默認配置修改

位於src/defaultSettings.js

1 module.exports = {
2   navTheme: 'dark', // 導航菜單的主題
3   primaryColor: '#1890FF', // 螞蟻設計的原色
4   layout: 'sidemenu', //導航菜單位置：sidemenu或topmenu
5   contentWidth: 'Fluid', //內容佈局：Fluid或Fixed，僅在佈局爲topmenu時有效
6   fixedHeader: false, // 粘性標題
7   autoHideHeader: false, // 自動隱藏標題
8   fixSiderbar: false, // 粘性siderbar
9 };