【Umi】Layout 布局的实现！！！

Layout 布局的实现

先看效果

当点击菜单项时会进行跳转，利用Umi的链接组件

- 当点击用户管理时：

- 当点击商品质量时：

目录文件

这里运用了yarn，这里有详情：

https://classic.yarnpkg.com/zh-Hans/docs/install/

Umi的官网也有教安装依赖

https://umijs.org/zh-CN/docs/getting-started

package.json

lodash官网: 是一个一致性、模块化、高性能的 JavaScript 实用工具库

https://www.lodashjs.com/

stylus官网: 富有表现力，动态，强大的CSS（样式这里就不用展示了，自行学习，任意布局）

https://stylus-lang.net/

当只安装了stylus而没有安装stylus-loader时，会报下面错误：（两者同时安装）

配置

Umi 在 .umirc.ts 或 config/config.ts 中配置项目和插件，支持 es6。这里配置在.umirc.ts配置插件

import {
      defineConfig } from 'umi'
import routes from './config.router'

export default defineConfig({
     
  routes: routes,
  base: '/console',
  chainWebpack(memo, {
      createCSSRule }) {
     
    createCSSRule({
     
      lang: 'stylus',
      type: 'csr',
      test: /\.styl(us)?$/,
      loader: 'stylus-loader'
    })
  }
})

---

---

---

设置路由前缀:

这里把路由拿出一个文件单独配置，方便查看

export default [
  {
     
    path: '/',
    component: '@/layouts/index' // 主页加载layout公共组件
  }
]

export const menus = [ // 菜单的配置项，用于动态渲染 key:	唯一标志 title: 菜单项值 path：用于路由跳转
  {
      key: 'user-manage', title: '用户管理', path: '/user-manage' },
  {
     
    key: 'good-manage', title: '商品管理',
    children: [
      {
      key: 'good-quantity', title: '商品数量', path: '/good-quantity' },
      {
      key: 'good-quality', title: '商品质量', path: '/good-quality' }
    ]
  },
  {
     
    key: 'address-manage', title: '地址管理',
    children: [
      {
      key: 'my-address', title: '我的地址', path: '/my-address' }
    ]
  },
  {
      key: 'collect-manage', title: '收藏管理', path: '/collect-manage' }
]

layouts/index.tsx

import React from 'react'
import {
      Layout, Menu } from 'antd' // 布局容器 导航菜单
import _ from 'lodash' // 引入JS工具库
import {
      Link } from 'umi' // umi自带的链接组件
import {
      menus } from '../../config.router' // 配置的菜单项
import './index.styl' // 样式

const {
      SubMenu } = Menu // 子菜单
const {
      Header, Content, Sider } = Layout // 顶部布局， 内容部分， 侧边栏

export default function Layout (props: any) {
     
  function getMenuItem(menuArr: any) {
      // 获取菜单项
    return _.map(menuArr, route => {
     
      if(route.children) {
       // 有多级菜单时
        return (
          <SubMenu key={
     route.key} title={
     route.title}>
            {
     getMenuItem(route.children)} // 重复调用函数渲染出子级菜单
          </SubMenu>
        )
      }
      return <Menu.Item key={
     route.key}> <Link to={
     route.path}>{
     route.title}</Link> </Menu.Item>
    })
  }

   function sideBarRender() {
     
     return (
       <Sider width={
     180} style={
     {
      height: 'calc(100vh-48px)' }}>
         <Menu mode='inline' theme='dark' style={
     {
      height: '100%', borderRight: 0 }}>
           {
     getMenuItem(menus)}
         </Menu>
       </Sider>
     )
   }

    return (
      <Layout>
        <Header className='height-48' />
        <Layout>
          {
     sideBarRender()}
          <Layout>
            <Content>
              <div id='milk' style={
     {
      height: 'cacl(100vh-48px)' }}> {
     props.children} </div>
             </Content>
           </Layout>
         </Layout>
       </Layout>
    )
}

_.map()

antd Menu(导航菜单)

https://ant-design.gitee.io/components/menu-cn/#API

antd Layout(布局)

https://ant-design.gitee.io/components/layout-cn/

觉得有用就给小编点个赞呗！！！