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