umi3 antDesignPro布局layout配置快速搭建项目

1. 环境准备

1. 安装nodejs
2. 安装yarn
3. 安装umi

 node -v
 npm install -g yarn
 npm install -g umi

2. 创建项目

1. 创建myapp文件夹

 mkdir umiapp && cd umiapp
 yarn create @umijs/umi-app

项目目录结构如下：

2. 安装项目依赖并启动项目

 yarn
 yarn start

项目启动后，在浏览器里打开 http://localhost:8000/，能看到以下界面：

3. 修改配置，应用antd layout布局

1. 安装antd layout插件

 yarn add  @ant-design/pro-layout

2. 修改.umirc.文件配置路由

在umi中如果没有在配置文件中配置路由和布局的相关项，route是默认根据pages目录下的文件生成路由文件的，而layout如果不想要蚂蚁金服的布局，可以直接在src目录下新建layout目录自定义布局

import { defineConfig } from 'umi';
export default defineConfig({ 
 title: '管理平台业务模版', 
 nodeModulesTransform: {    type: 'none',  }, 
 layout: {    name: '数据管理菜单',     locale: false,  }, 
  routes: [    { path: '/', component: '@/pages/index' },  
     {  path: '/dashboard',      name: '数据统计',      icon: 'dashboard',  
         routes: [    
             { path: '/dashboard/analysis',icon:'AreaChartOutlined', name: '分析页', component: '@/pages/Dashboard/Analysis' },    
             { path: '/dashboard/monitor',icon:'DesktopOutlined', name: '控制页', component: '@/pages/Dashboard/Monitor' },      ],    },  
     {    path: '/func',    name: '功能页',    icon: 'AppstoreAddOutlined',  
       routes: [   
          { path: '/func/draggable',icon:'BuildOutlined', name: '拖拽功能', component: '@/pages/Func/draggable' },    ],  },    { component: '@/pages/404' }, 
  ],});

3. 根据配置文件中component新建路由对应的组件

1. 可以直接在目录中新建对应名字的文件夹和文件
2. 可以通过umi指令完成

//创建页面 
 umi g page Dashboard/Monitor   //默认生成的文件后缀是js和css
 umi g page Dashboard/Monitor --typescript --less   //显示指定生成的文件后缀是tsx和less

项目生成效果如下：