Antd Desgin Pro 保姆级配置教程（一）

安装 Antd Desgin Pro

根据官方文档的流程

安装依赖

  yarn

启动项目

  yarn start

出现如下界面即安装成功

默认账号：

Antd Design Pro 的内置基础命令

start 启动项目

build 打包项目，默认打包文件为dist

analyze 依赖包分析，如果需要优化性能和包大小，会需要到这个命令

lint 代码检查，Antd Desgin Pro 默认在代码conmmit过程中运行lint命令，代码不规范无法commit

lint:fix 修复简单的代码规范问题，复杂一些的需要开发者手动去解决

清空或修改页面的配置

输入用户名和密码，进入到主页面

修改左上角的logo 和 标题

根目录 config/defaultSettings,ts 文件

根目录下config/config.ts文件下引入，并且内置了2个属性

更改title和logo后，刷新页面

修改右上角的内容

根目录src/app.tsx

如果是隐藏右上角的内容，或者自定义内容的话，只需要把rightContentRender的返回值，返回为自己写的组件即可

既然都看到这里了，就了解一下自带的配置把

• rightContentRender：自定义头右部的 render 方法
• waterMarkProps: 配置水印，不需要传空对象即可
• footerRender: 自定义页脚内容
• onPageChange: 路由切换时触发的回调，一般用于检测用户的token是否到期
• links: 菜单右下角显示的内容，一般在开发环境用于文档的快速跳转，稍后会说到
• menuHeaderRender: 自定义菜单头
• childrenRender: 公共页面额外展示的内容

childrenRender 额外展示的内容

例如这个小设置。是可以删除掉，或者自定义公共页面额外显示的内容

注释后，发现设置小图标消失

页面标题logo，内容替换

根目录src/pages/document.ejs

title 标题栏加载中文本

link 标题栏图标

保存查看效果

加载页面的配置

最上层的img 加载页面的大图片

下层是加载页面的其他内容

保存查看效果