umi+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#prolayoutname: '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;

效果