在 src / pages 下创建新的 js,less 文件。 如果有多个相关页面,您可以创建一个新文件夹来放置相关文件。
为了更好的演示,我们初始化NewPage.js
的内容如下:
暂时不向本文档中的样式文件添加内容,您也可以尝试自己添加内容。
样式文件默认使用CSS Modules,如果需要,可以导入antd less 变量 在文件的头部:
这样可以轻松获取 antd 样式变量并在文件中使用它们,这可以保持保持页面的一致性,并有助于实现自定义主题。
在脚手架中我们通过嵌套路由来实现布局模板。routes.ts
是一个数组,其中第一级数据就是我们的布局,如果你需要新增布局可以再直接增加一个新的一级数据。
layouts 文件时一个约定,layout 都应该放入其中。v5 没有了内置的布局,所以没有这个文件夹,如果你的项目中没有手动创建即可。
Bigfish 的默认布局中的菜单根据 routes.ts
中的路由生成的,所以我们可以配置路由,菜单也会产生。
我们需要在 routes.ts
中使用 component
配置我们页面到路由中。
路由配置完成后,访问页面即可看到效果,如果需要在菜单中显示,需要配置 name
,icon
,hideChildrenInMenu
等来辅助生成菜单。
具体值如下:
name:string
配置菜单的 name,如果配置了国际化,name 为国际化的 key。icon:string
配置菜单的图标,默认使用 antd 的 icon 名,默认不适用二级菜单的 icon。access:string
权限配置,需要预先配置权限hideChildrenInMenu:true
用于隐藏不需要在菜单中展示的子路由。hideInMenu:true
可以在菜单中不展示这个路由,包括子路由。hideInBreadcrumb:true
可以在面包屑中不展示这个路由,包括子路由。headerRender:false
当前路由不展示顶栏footerRender:false
当前路由不展示页脚menuRender: false
当前路由不展示菜单menuHeaderRender: false
当前路由不展示菜单顶栏parentKeys: string[]
当此节点被选中的时候也会选中 parentKeys 的节点flatMenu
子项往上提,只是不展示父菜单要使用 iconFont 的图标必须满足两个条件
在 src/app.tsx
中的配置:
iconfontUrl 的连接需要在 iconfont 官网中获取
在路由中的配置:
布局及路由都配置好之后,回到之前新建的 NewPage.js
,可以开始写业务代码了!