umi3+react+dva简单搭建一个项目框架(配置layout、antd、路由、配置request请求拦截)

umi3+react+dva简单搭建一个项目框架(配置layout、antd、路由等)

创建项目

• 新建一个目录 umi3-pro

yarn create @umijs/umi-app
npm create @umijs/umi-app
yarn 
yarn start

引入antd

• 直接引入使用，umi内置了antd

import { Button } from "antd"
<Button type="primary">Primary Button</Button>

抽离配置 config

• 删除根目录下的.umirc.ts 新建根目录下config/config.ts
• router的拆分 config / router / router.js

01: config / config.js

import { defineConfig } from 'umi';
import routes from './router/routes';
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes,
  // antd的配置
  antd:{
    dark:false // 开启暗黑主题
  },
  fastRefresh: {},
});

02: config / router / router.js

const routes =  [
  { path: '/', component: '@/pages/index' },
  { path: '/test', component: '@/pages/test' },
]

export default routes

03：配置layout

03_1 config.js

import { defineConfig } from 'umi';
import routes from './router/routes';
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes,
  // antd的配置
  antd:{
    dark:false // 开启暗黑主题
  },
  fastRefresh: {},
  layout: {
    // 支持任何不需要 dom 的
    // https://procomponents.ant.design/components/layout#prolayout
    name: 'Ant Design',
    locale: true,
    layout: 'side',
  },
});

03_2 router.js

const routes = [
  // 非layout菜单 完整页面
  {
    path: '/login',
    component: '@/pages/login/Login',
    layout: false,
  },
  // layout菜单
  { path: '/', component: '@/pages/index', name: '首页' },
  { path: '/test', component: '@/pages/test', name: '测试' },
  // 详情页 非layout菜单 test的详情页
  {
    path: '/test/detail',
    component: '@/pages/test/Detail',
  },
  // 嵌套页面
  {
    path: '/about',
    name: '关于',
    routes: [
      {
        path: '/about/about_1',
        component: '@/pages/about/about_1/About_1',
        name: '关于1',
      },
      {
        path: '/about/about_2',
        component: '@/pages/about/about_2/About_2',
        name: '关于2',
      },
    ],
  },
];

export default routes;

效果

04：配置request请求拦截

src / app.js

// 运行时 配置

// 异步请求相关 运行时配置
 export const request = {
  timeout: 1000 * 10, // 10s超时
  // 请求拦截
  requestInterceptors:[
    (url,options) => {
      console.log('请求拦截',url,"options",options);
      return options
    }
  ],
  // 响应拦截
  responseInterceptors:[
    (response,options) => {
      console.log('响应拦截',response,"options",options);
      return response
    }
  ]
 }