umi + antd-pro 精简化流程

深度使用 antd pro 和 umi 的组合之后,我想自己对这个框架进行控制,脚手架搭建出来的那些乱七八糟的就不要了。在精简过程中,有一些小技巧,故记录在此。

安装 umi

npx @umijs/create-umi-app

安装插件

想在菜单中用字符串指定 icon 需要安装 umi-plugin-antd-icon-config 这个插件进行转换。

修改配置

config/config.ts

import routes from './routes';

import { defineConfig } from 'umi';
export default defineConfig({
  // https://github.com/umijs/umi-plugin-antd-icon-config
  plugins: ['umi-plugin-antd-icon-config'],
  nodeModulesTransform: {
    type: 'none',
  },
  routes,

  fastRefresh: {},
  dva: {
    hmr: true,
    immer: true,
  },
});

可以看到我启用了 dva 还有声明式路由 routes

配置基础路由

这里想要 icon 生效,就要安装前面提到的那个转换插件。路由path注意的是,在任意层级都要写完整的路径,这个 pro layout 不会为你做拼接。

export default [
  {
    path: '/',
    component: '@/layouts/BlankLayout',
    routes: [
      {
        path: '/',
        component: '@/layouts/BasicLayout',
        routes: [
          {
            path: '/',
            redirect: '/resources/picture',
          },
          {
            path: '/resources',
            name: '资源管理',
            icon: 'tool',
            routes: [
              {
                path: '/resources/picture',
                name: '图片资源',
                component: '@/pages/Picture',
              },
            ],
          },
        ],
      },
    ],
  },
];

引入 Layout

这块参照脚手架引入 BlankLayout 做一个排错定位,引入 BasicLayout 做一个基础框架。其中重要的是要把 umi 注入到 props 中属性传给 ProLayout,用于生成菜单以及面包屑。这里 menuItemRender 是用于根据路由生成多级菜单路由,也是必须的选项。

import ProLayout, { PageContainer } from '@ant-design/pro-layout';
export default (props: any) => {
  return (
    <div
      id="test-pro-layout"
      style={{
        height: '100vh',
      }}
    >
      <ProLayout {...props}
      menuItemRender={(menuItemProps, defaultDom) => {
          if (
            menuItemProps.isUrl ||
            !menuItemProps.path ||
            location.pathname === menuItemProps.path
          ) {
            return defaultDom;
          }
          return <Link to={menuItemProps.path}>{defaultDom}</Link>;
        }}>
        <PageContainer>{props.children}</PageContainer>
      </ProLayout>
    </div>
  );
};

这样一个精简的脚手架就OK了,比官方 simple 的还要干净。适合比较熟悉 antd pro 的同学。