題外話：今年聖誕的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 };