DT走过的路

• 三方UI库地址：https://ant.design/index-cn
• umi文档地址：https://umijs.org/zh-CN

安装

pnpm dlx create-umi@latest
npm start

在普通的 Umi 应用中，默认 不附带任何插件 ，如需使用 Max 的功能（如 数据流、antd 等），需要手动安装插件并开启他们：

pnpm add -D @umijs/plugins

如开启 antd 插件：

// .umirc.ts
export default {
  plugins: ['@umijs/plugins/dist/antd'],
  antd: {}
}

import React from 'react';
import { Button, Flex } from 'antd';
export default function Test() {
  return (
    <Flex gap="small" wrap>
        <Button type="primary">Primary Button</Button>
        <Button>Default Button</Button>
        <Button type="dashed">Dashed Button</Button>
        <Button type="text">Text Button</Button>
        <Button type="link">Link Button</Button>
    </Flex>
  );
}

umi中路由

1.umirc.ts定义

import { defineConfig } from "umi";
export default defineConfig({
  // routes: [
  //   { path: "/", component: "index" },
  //   { path: "/docs", component: "docs" },
  // ],
  npmClient: 'pnpm',
  utoopack: {},
});

2.自动生成

将routes注释掉，运行会默认生成.umi/core/route.tsx

Layout和跳转

跳转有Link和通过onClick的history方式

import { Link, Outlet } from 'umi';
import styles from './index.less';
import { Button } from 'antd';
import { history } from 'umi';
export default function Layout() {
  const goto = (path) =>{
    history.push(path);
  };

  return (
    <div className={styles.navs}>
      <Link to="/">Home</Link>
      <Link to="/dashboard">Dashboard</Link>
      <Link to="/user">User</Link>
      <Link to="/docs">Docs</Link>
      <Button type="primary" onClick={() => goto('/dashboard')}>ClickPrimary Button</Button>
      <Outlet />
    </div>
  );
}

别名定义

倒入path模块，添加alias属性

const {resolve} = require('path');  
​
alias: {
    api: resolve(__dirname, './src/services/'), 
    components: resolve(__dirname, './src/components'),
    config: resolve(__dirname, './src/utils/config'),
    themes: resolve(__dirname, './src/themes'),
    utils: resolve(__dirname, './src/utils'),
  }

layout选择

import { Link, Outlet } from 'umi';
import styles from './index.less';
import { selectLayout } from 'utils/selectLayout';
import BaseLayout from './BaseLayout';
import LoginLayout from './LoginLayout';
import { useLocation } from 'umi';
export default function Layout({ children }) {
  const location = useLocation();
  console.log(location,'location');
  const layoutMap = {
    BaseLayout,
    LoginLayout,
  }
  const Container = layoutMap[selectLayout(location.pathname)] || BaseLayout;
  console.log(Container,'Container');
  return (
    <Container>
      {children}
    </Container>
  );
}

export const selectLayout = (pathname) => {
  return pathname.includes('/users') ? 'LoginLayout' : 'BaseLayout';
}