Umi Max 如何开启 layout 插件自动生成顶部导航与侧边菜单【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi在 Umi Maxumijs/max项目中页面框架的顶部导航和侧边栏菜单不需要手写layout 插件内置了 Ant Design 的 Layoutant-design/pro-layout只要在配置里开启插件、并给路由写上name菜单就会根据路由配置自动生成。本文按“创建项目 → 开启插件 → 配置路由生成菜单 → 运行时微调 → 启动验证”的路径说明如何在 Umi Max 中完成这一步。前提环境Node 版本 22 或以上包管理工具推荐使用 pnpm。创建 Umi Max 项目使用create-umi选择Ant Design Pro模板创建项目模板默认依赖umijs/max并预装了一套插件$ npx create-umilatest ? Pick Umi App Template › - Use arrow-keys. Return to submit. Simple App ❯ Ant Design Pro Vue Simple App注意 Umi Max 项目中命令行请使用max而不是umi例如$ npx max g jest新建的 Umi Max 项目默认安装了一批可单独开启的插件layout 即其中之一权限access、站点统计analytics、Antd、图表charts、dva、initial-state、数据流、布局和菜单layout、国际化i18n、model、乾坤微前端qiankun、请求库、Tailwind CSS 等。构建时开启 layout 插件在配置文件config/config.ts中加入layout属性即可开启插件// config/config.ts import { defineConfig } from umi; export default defineConfig({ layout: { title: Ant Design, locale: false, // 默认开启如无需菜单国际化可关闭 }, });仓库中 Ant Design Pro 示例的写法可以参考 config/config.ts/** * name layout 插件 * doc https://umijs.org/docs/max/layout-menu */ layout: { locale: true, ...defaultSettings, },两个常用构建时配置项title显示在布局左上角的产品名Type 为string默认值为package.json中的name。locale是否开启菜单国际化Type 为boolean。开启后路由里配置的菜单名会被当作国际化 key插件去 locales 文件中查找menu.[key]对应的文案默认值为该 key多级路由会查找menu.[key].[key]该功能需要配合 i18n 插件使用如无需菜单国际化可配置false关闭。除插件特有配置外构建时配置会透传给ant-design/pro-layout支持它的配置项。配置路由让菜单自动生成顶部导航和侧边栏菜单是根据路由配置自动生成的。路由中新增的关键字段如下示例来自官方文档// config/route.ts export const routes: IBestAFSRoute[] [ { path: /welcome, component: IndexPage, name: 欢迎, // 兼容此写法 icon: testicon, // --- // 新页面打开 target: _blank, // 不展示顶栏 headerRender: false, // 不展示页脚 footerRender: false, // 不展示菜单 menuRender: false, // 不展示菜单顶栏 menuHeaderRender: false, // 权限配置需要与 plugin-access 插件配合使用 access: canRead, // 隐藏子菜单 hideChildrenInMenu: true, // 隐藏自己和子菜单 hideInMenu: true, // 在面包屑中隐藏 hideInBreadcrumb: true, // 子项往上提仍旧展示 flatMenu: true, }, ];决定菜单能否生成的字段namestring菜单上显示的名称没有则不展示该菜单。iconstring菜单上显示的 antd icon插件会自动按需转化为 Antd icon 的 dom写法如icon: homeoutlined 线框风格可简写、icon: HomeFilled实底风格、icon: HomeTwoTone双色风格。它也兼容 icons 功能打开 icons 功能后可以使用图标集或本地图标。以 Pro 示例的路由配置 config/routes.ts 为例nameicon的写法即生效方式{ path: /welcome, name: welcome, icon: smile, component: ./Welcome, }, { name: list.table-list, icon: table, path: /list, component: ./TableList, },菜单渲染相关的开关字段xxxRenderfalse不展示对应模块headerRenderfalse不显示顶栏、footerRenderfalse不显示页脚、menuRenderfalse不显示菜单、menuHeaderRenderfalse不显示菜单的 title 和 logo。hideInXXX管理 menu 渲染hideChildrenInMenutrue隐藏子菜单、hideInMenutrue隐藏自己和子菜单、hideInBreadcrumbtrue在面包屑中隐藏。flatMenutrue打平菜单该项本身在菜单中隐藏子项往上提仍旧展示。accessstring配合权限插件plugin-access使用。权限插件会把这里配置的 access 字符串与当前用户所有权限做匹配如果找到相同的项且该权限的值为 false用户访问该路由时默认展示 403 页面。layout 插件默认还支持对路由的 403/404 处理和 Error Boundary。用运行时配置微调布局运行时配置写在src/app.tsx中key 为layout。除插件特有配置外运行时配置支持所有构建时配置并透传给ant-design/pro-layoutimport { RunTimeLayoutConfig } from umijs/max; export const layout: RunTimeLayoutConfig (initialState) { return { // 常用属性 title: Ant Design, logo: https://img.alicdn.com/tfs/TB1YHEpwUT1gK0jSZFhXXaAtVXa-28-27.svg, // 默认布局调整 rightContentRender: () RightContent /, footerRender: () Footer /, menuHeaderRender: undefined, // 其他属性见 ant-design/pro-layout 文档 }; };常用运行时属性logostring显示在布局左上角产品名前的产品 Logo默认为 Ant Design Logo。rightRender(initialState: any) React.ReactNode默认展示用户名、头像、退出登录相关组件initialState是app.ts(x)中getInitialState返回的对象。logout(initialState: any) void点击退出登录的处理逻辑默认不做处理。注意默认在顶部右侧并不会显示退出按钮需要在app.ts(x)中配置getInitialState返回一个对象才可以显示。ErrorBoundaryReactNode发生错误后展示的组件默认为 Ant Design Pro 的错误页。仓库示例中的 examples/max/app.ts 展示了最简写法export const layout { logout() { alert(logout); }, };启动并验证菜单效果在项目根目录执行启动命令Umi Max 项目使用max$ max dev参考仓库示例的 package.json 脚本写法等价于pnpm devdev: max dev见 examples/max/package.json。启动成功后终端会打印本地访问地址Umi 文档示例中为https://127.0.0.1:8000实际端口以终端输出为准在浏览器中打开该地址即可验证顶部导航和侧边栏菜单已出现且条目与路由配置中的name/icon一一对应布局左上角显示title对应的产品名未配置时为package.json的name配置了layout: false的一级路由如登录页不显示全局布局组件内容占据整个页面。菜单文案是否展示、能否跳转都可以直接对照路由配置核对name为菜单显示名component为渲染组件路径相对路径从src/pages开始寻找。限制与常见调整layout: false用于单独关闭某个路由的全局布局仅在一级路由生效// .umirc.ts export default { routes: [ // 取消 login 页面的全局布局从而自行实现整个页面 { path: /login, component: /pages/Login, layout: false }, ], }Pro 示例中登录页和 404 页就是这种用法path: /user与path: *均配置了layout: false。路由未写name就不会出现在菜单里只渲染页面本身想让页面进菜单先补上name。菜单国际化locale: true依赖 i18n 插件与src/locales下的多语言文件key 规则为menu.${submenu-name}.${name}。权限路由需要同时开启 access 插件并在src/access.ts中定义权限项后路由上的access字段才会生效。layout 插件默认基于 Umi 路由封装配置支持按路由级别控制展示/隐藏更多高级菜单玩法如动态菜单文档建议参考 ProLayout 的菜单高级用法文档。完成以上配置后顶栏与侧边菜单即由路由自动驱动新增路由时只需补充name可选icon无需改动布局代码。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
