卡盟网站建设公司高清品牌网站设计建设

---

前言

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

---

一、创建项目

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

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 wanterrorConfig: {errorHandler() {},errorThrower() {},},requestInterceptors: [(config: any)=> {let token = localStorage.getItem('token') || '';return {...config,headers: {...config.headers,authorization: token,},};},],responseInterceptors: [(response) => {// 拦截响应数据，进行个性化处理const headers = response.headers;// 设置tokenif (headers.authorization) {localStorage.setItem('token', headers.authorization);}return response;},],
};

(3)全局初始状态 getInitialState

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

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

getInitialState

小结

到此刚刚开了一个小头，下一章，将记录登录页面及相关proxy及routes相关操作。