react-umi-2-1.layout快速布局

最新推荐文章于 2025-11-20 15:55:35 发布

An_s

最新推荐文章于 2025-11-20 15:55:35 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： umi3+egg中台实战项目文章标签： javascript reactjs typescript

本文链接：https://blog.youkuaiyun.com/echo_Ae/article/details/110820969

umi3+egg中台实战项目专栏收录该内容

32 篇文章 ¥59.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍如何使用umi3框架轻松构建后端管理系统的布局，包括头部导航栏、左侧导航栏和主要内容区域。通过修改.umirc.ts配置和编写app.tsx文件，可以实现简单的布局设置。此外，通过自定义HeaderNav组件并调整plugin-layout插件的配置参数，能够进一步定制头部导航栏。文章鼓励读者查阅相关文档以了解更详细的API和高级布局选项。

ps：如果对umi框架不是很熟的小伙伴，我建议你先过文档，然后在来继续学会有非常好的效果，主要过一遍目录结构、配置、运行时配置即可。

上篇我们运行起项目，效果是这样的

这可不是我们想要的，常见的后端管理系统，基本都是分三大部分：头部导航栏、左边导航栏、内容。

可能我们之前常做的操作就是新建一个layout组件，然后各种写各种封装...可是你使用umi3框架之后，就是几行代码就可以搞定了。

.umirc.ts

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  layout: {
    name: 'An中台系统',
    theme: 'pro',
    locale: true,
  },
  routes: [

了解本专栏