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 };
