umi+antdPro快速搭建项目模板

模板截图：

要点：

• 使用umi脚手架搭建umi项目
• 使用antdPro的proLayout快速生成模板

搭建umi项目：

umi脚手架搭建自带有antdPro

yarn create @umijs/umi-app

修改文件目录：

config

刚创建的umi项目中，在src同级目录下，有个.umirc.ts文件，是用于全局配置的。在src同级目录中，创建config文件夹，在其中创建config.ts和routes.ts文件，将.umirc.ts文件中的内容复制到config.ts中，并将.umirc.ts文件删除。意在使项目的配置更精细化。umi会自动读取congfig/config.ts文件中的内容用于全局配置

// config/config.ts
import { defineConfig } from 'umi';
import routes from './routes';
import Layout from '@/layouts/index';
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes,
  fastRefresh: {},
});

// config/routes.ts
// 此处配置路由信息，对应路由渲染对应组件
export default [
  {
    path: '/',
    // 此处就是layout组件，通过二级路由在layout对应部分渲染子路由的内容
    component: '@/layouts',
    routes: [
      {
        name: '首页',
        path: '/home',
        component: '@/pages/Home',
      },
      {
        name: 'Charts',
        path: '/chart',
        component: '@/pages/Demo',
      },
    ],
  },
];

layouts

在src文件夹中创建layouts文件夹，在layouts文件夹中创建index.tsx文件和menuList.tsx文件。index.tsx的布局模板可以去antdpro官网中自行选择来复制过来。但官网中的代码不能直接用，需要修改的。

// src/layouts/index.tsx
import {
  GithubFilled,
  InfoCircleFilled,
  PlusCircleFilled,
  QuestionCircleFilled,
  SearchOutlined,
} from '@ant-design/icons';
import { PageContainer, ProCard, ProLayout } from '@ant-design/pro-components';
import { Button, Input } from 'antd';
import { useState } from 'react';
import { menuList, appList } from './menuList';
import { Link, useLocation } from 'umi';

export default (props: any) => {
  const [pathname, setPathname] = useState('/');
  const location = useLocation();
  return (
    <ProLayout
      // @ts-ignore
      token={{
        colorBgAppListIconHover: 'rgba(0,0,0,0.06)',
        colorTextAppListIconHover: 'rgba(255,255,255,0.95)',
        colorTextAppListIcon: 'rgba(255,255,255,0.85)',
        sider: {
          colorBgCollapsedButton: '#fff',
          colorTextCollapsedButtonHover: 'rgba(0,0,0,0.65)',
          colorTextCollapsedButton: 'rgba(0,0,0,0.45)',
          colorMenuBackground: '#004FD9',
          colorBgMenuItemCollapsedHover: 'rgba(0,0,0,0.06)',
          colorBgMenuItemCollapsedSelected: 'rgba(0,0,0,0.15)',
          colorBgMenuItemCollapsedElevated: 'rgba(0,0,0,0.85)',
          colorMenuItemDivider: 'rgba(255,255,255,0.15)',
          colorBgMenuItemHover: 'rgba(0,0,0,0.06)',
          colorBgMenuItemSelected: 'rgba(0,0,0,0.15)',
          colorTextMenuSelected: '#fff',
          colorTextMenuItemHover: 'rgba(255,255,255,0.75)',
          colorTextMenu: 'rgba(255,255,255,0.75)',
          colorTextMenuSecondary: 'rgba(255,255,255,0.65)',
          colorTextMenuTitle: 'rgba(255,255,255,0.95)',
          colorTextMenuActive: 'rgba(255,255,255,0.95)',
          colorTextSubMenuSelected: '#fff',
        },
      }}
      menu={{ defaultOpenAll: true, autoClose: false }}
      route={{ routes: menuList }}
      location={{
        pathname,
      }}
      avatarProps={{
        src: 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
        size: 'small',
        title: '七妮妮',
      }}
      actionsRender={(props: any) => {
        if (props.isMobile) return [];
        return [
          props.layout !== 'side' ? (
            <div
              key="SearchOutlined"
              aria-hidden
              style={{
                display: 'flex',
                alignItems: 'center',
                marginInlineEnd: 24,
              }}
              onMouseDown={(e) => {
                e.stopPropagation();
                e.preventDefault();
              }}
            >
              <Input
                style={{
                  borderRadius: 4,
                  marginInlineEnd: 12,
                  backgroundColor: 'rgba(0,0,0,0.03)',
                }}
                prefix={
                  <SearchOutlined
                    style={{
                      color: 'rgba(0, 0, 0, 0.15)',
                    }}
                  />
                }
                placeholder="搜索方案"
                bordered={false}
              />
              <PlusCircleFilled
                style={{
                  color: 'var(--ant-primary-color)',
                  fontSize: 24,
                }}
              />
            </div>
          ) : undefined,
          <InfoCircleFilled key="InfoCircleFilled" />,
          <QuestionCircleFilled key="QuestionCircleFilled" />,
          <GithubFilled key="GithubFilled" />,
        ];
      }}
      menuFooterRender={(props: any) => {
        return (
          <p
            style={{
              textAlign: 'center',
              paddingBlockStart: 12,
            }}
          >
            Power by Ant Design
          </p>
        );
      }}
      menuItemRender={(menuItemProps: any, defaultDom: any) => {
        if (menuItemProps.isUrl || menuItemProps.children) {
          return defaultDom;
        }
        if (menuItemProps.path && location.pathname !== menuItemProps.path) {
          return (
            <Link to={menuItemProps.path} target={menuItemProps.target}>
              {menuItemProps.breadcrumbName}
            </Link>
          );
        }
        setPathname(menuItemProps.path);
        return defaultDom;
      }}
      appList={appList}
    >
      <PageContainer
      >
        <ProCard
          style={{
            height:'calc(100vh - 100px)',
          }}
        >
          {props.children}
        </ProCard>
      </PageContainer>
    </ProLayout>
  );
};

// 此处配置侧边菜单信息，与路由保持一致
export const menuList = [
  {
    path: '/home',
    name: '首页',
    component: '@/pages/Home'
  },
  {
    path: '/demo',
    name: 'Demo'
    children: [
      {
        path: '/chart',
        name: 'chat',
        component: '@/pages/Demo'
      },
    ],
  },
];

export const appList = [
  {
    icon: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
    title: 'Ant Design',
    desc: '杭州市较知名的 UI 设计语言',
    url: 'https://ant.design',
  },
  {
    icon: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
    title: 'AntV',
    desc: '蚂蚁集团全新一代数据可视化解决方案',
    url: 'https://antv.vision/',
    target: '_blank',
  },
  {
    icon: 'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg',
    title: 'Pro Components',
    desc: '专业级 UI 组件库',
    url: 'https://procomponents.ant.design/',
  },
  {
    icon: 'https://img.alicdn.com/tfs/TB1zomHwxv1gK0jSZFFXXb0sXXa-200-200.png',
    title: 'umi',
    desc: '插件化的企业级前端应用框架。',
    url: 'https://umijs.org/zh-CN/docs',
  },

  {
    icon: 'https://gw.alipayobjects.com/zos/bmw-prod/8a74c1d3-16f3-4719-be63-15e467a68a24/km0cv8vn_w500_h500.png',
    title: 'qiankun',
    desc: '可能是你见过最完善的微前端解决方案🧐',
    url: 'https://qiankun.umijs.org/',
  },
  {
    icon: 'https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg',
    title: '语雀',
    desc: '知识创作与分享工具',
    url: 'https://www.yuque.com/',
  },
  {
    icon: 'https://gw.alipayobjects.com/zos/rmsportal/LFooOLwmxGLsltmUjTAP.svg',
    title: 'Kitchen ',
    desc: 'Sketch 工具集',
    url: 'https://kitchen.alipay.com/',
  },
  {
    icon: 'https://gw.alipayobjects.com/zos/bmw-prod/d3e3eb39-1cd7-4aa5-827c-877deced6b7e/lalxt4g3_w256_h256.png',
    title: 'dumi',
    desc: '为组件开发场景而生的文档工具',
    url: 'https://d.umijs.org/zh-CN',
  },
]

文件目录结构

注意：

1. prolayout组件配置了splitMenus属性后左侧菜单栏就消失了，因此直接不配置
2. 若是在config/config.ts中配置了layout属性，则自定义的layout会失效，因此不配置layout属性。