Umi从零搭建Ant Design Pro项目（1）

前言

炒个旧饭，基于Umi从零创建Ant Design Pro项目，以学习记录为目的。闲言少述，直奔主题。

一、创建项目

关于创建Umi及Umi生成AntDesign Pro简易项目，不作过多叙述。见Umi文档

见初始化 @umijs/max 模板项目代码

pnpm run dev

界面类似下面，有点简易

二、配置的修改

1.基本配置

生成项目后的配置如下，见.umirc.ts，可以将这个配置文件删除，改用config/config.ts。见Umi文档.umirc.ts。这个配置文件，在以后的操作中还会常常修改它。

import { defineConfig } from '@umijs/max';

export default defineConfig({
  antd: {},
  access: {},
  model: {},
  initialState: {},
  request: {},
  layout: {
    title: '@umijs/max',
  },
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      name: '首页',
      path: '/home',
      component: './Home',
    },
    {
      name: '权限演示',
      path: '/access',
      component: './Access',
    },
    {
      name: ' CRUD 示例',
      path: '/table',
      component: './Table',
    },
  ],
  npmClient: 'pnpm',
});

2.入口文件

初始化app.ts如下：

export async function getInitialState(): Promise<{ name: string }> {
  return { name: '@umijs/max' };
}

export const layout: RunTimeLayoutConfig = ({ initialState }) => {
  return {
    logo: 'https://img.alicdn.com/tfs/TB1YHEpwUT1gK0jSZFhXXaAtVXa-28-27.svg',
    menu: {
      locale: false,
    },
  };
};

（1）改layout的菜单模式

先小试一把

import { RequestConfig, RunTimeLayoutConfig } from '@umijs/max';
//……优美的省略号……
export const layout: RunTimeLayoutConfig = ({ initialState }) => {
  return {
  //……优美的省略号……
    layout: 'mix',
  };
};

layout菜单模式，side | top | mix，详见ProComponents文档-ProLayout - 高级布局的介绍。

(2)网络请求的拦截

还是在app.ts里,还是看文档吧
下面代码示例，因为后端使用thinkphp6，thans/tp-jwt-auth，token自动刷新，前面需要将token不时保存更换一下。

//……优美的省略号……
//上面代码中已引入RequestConfig
export const request: RequestConfig = {
  timeout: 1000,
  // other axios options you want
  errorConfig: {
    errorHandler() {},
    errorThrower() {},
  },
  requestInterceptors: [
    (config: any)=> {
      let token = localStorage.getItem('token') || '';
      return {
        ...config,
        headers: {
          ...config.headers,
          authorization: token,
        },
      };

    },
  ],
  responseInterceptors: [
    (response) => {
      // 拦截响应数据，进行个性化处理
      const headers = response.headers;
      // 设置token
      if (headers.authorization) {
        localStorage.setItem('token', headers.authorization);
      }
      return response;
    },
  ],
};

(3)全局初始状态 getInitialState

全局初始状态是一种特殊的 Model。

全局初始状态在整个 Umi 项目的最开始创建。编写 src/app.ts 的导出方法 getInitialState()，其返回值将成为全局初始状态。见文档

getInitialState

小结

到此刚刚开了一个小头，下一章，将记录登录页面及相关proxy及routes相关操作。
本文涉及的代码，点击查看