ant-design-pro：pro.ant.design/zh-CN/docs/…
1、创建项目
#1、创建
yarn create @umijs/umi-app
# 或 npx @umijs/create-umi-app
#2、安装依赖
yarn install v1.21.1
#3、启动项目
yarn start
2、修改配置
默认的脚手架内置了 @umijs/preset-react，包含布局、权限、国际化、dva、简易数据流等常用功能。比如想要 ant-design-pro 的布局，编辑 .umirc.ts 配置 layout: {}，并且需要安装 @ant-design/pro-layout。
import { defineConfig } from 'umi';
export default defineConfig({
+ layout: {},
routes: [
{ path: '/', component: '@/pages/index' },
],
});
3、部署发布
#构建
yarn build
#构建产物默认生成到 ./dist 下
4、本地验证
$ yarn global add serve
$ serve ./dist
┌────────────────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:5000 │
│ - On Your Network: http://192.168.12.34:5000 │
│ │
│ Copied local address to clipboard! │
│ │
5、目录结构
.
├── package.json
├── .umirc.ts
├── .env
├── dist
├── mock
├── public
└── src
├── .umi
├── layouts/index.tsx
├── pages
├── index.less
└── index.tsx
└── app.ts
6、sass支持
npm i --save-dev @umijs/plugin-sass
npm i --save-dev dart-sass sass-loader
.umirc.ts添加配置
"sass": { }
默认是 Dart Sass。
如果要切换到 Node Sass，可安装 node-sass 依赖，然后配置，
npm i --save-dev sass-loader@5.0.0 node-sass@4.14.1
export default {
sass: {
implementation: require('node-sass'),
},
}
7、route配置
pro配置说明
1、配置路由
path: string, #配置可以被 path-to-regexp@^1.7.0 理解的路径通配符
component: string, # location 和 path 匹配后用于渲染的 React 组件路径。可以是绝对路径，也可以是相对路径，如果是相对路径，会从 src/pages 开始找起,如果指向 src 目录的文件，可以用 @，也可以用 ../。比如 component: @/layouts/basic'，或者 component: '../layouts/basic'，推荐用前者。
exact: boolean, #Default: true,表示是否严格匹配，即 location 是否和 path 完全对应上。
routes: [], #配置子路由，通常在需要为多个路径增加 layout 组件时使用。
redirect: string, #配置路由跳转。
wrappers: string[], #配置路由的高阶组件封装。比如，可以用于路由级别的权限校验：
title: string, #配置路由的标题
#Pro 扩展路由配置
name:string 配置菜单的 name，如果配置了国际化，name 为国际化的 key。
icon:string 配置菜单的图表，默认使用 antd 的 icon 名，默认不适用二级菜单的 icon。
access:string 权限配置，需要预先配置权限
hideChildrenInMenu:true 用于隐藏不需要在菜单中展示的子路由。
hideInMenu:true 可以在菜单中不展示这个路由，包括子路由。
hideInBreadcrumb:true 可以在面包屑中不展示这个路由，包括子路由。
headerRender:false 当前路由不展示顶栏
footerRender:false 当前路由不展示页脚
menuRender: false 当前路由不展示菜单
menuHeaderRender: false 当前路由不展示菜单顶栏
flatMenu 子项往上提，只是不展示父菜单
target: '_blank' 点击新窗口打开
2、路由组件参数
路由组件可通过 props 获取到以下属性，
match，当前路由和 url match 后的对象，包含 params、path、url 和 isExact 属性
location，表示应用当前处于哪个位置，包含 pathname、search、query 等属性
history，同 api#history 接口
route，当前路由配置，包含 path、exact、component、routes 等
routes，全部路由信息
