1.umi是什么？

他是“蚂蚁金服的底层前端框架”		
他包含了路由、部署、测试等一些列功能的企业级的可扩展的前端底层框架

2.环境

// 创建项目

$ yarn create @umijs/umi-app

// 安装依赖

$ yarn

// 启动项目

$ yarn start

// 构建

$ yarn build

// 本地验证服务

$ yarn global add serve

serve ./dist

3.目录

├── package.json

├── .umirc.ts

├── .env

├── dist

├── mock

├── public

└── src

| ├── .umi

| ├── layouts/index.tsx

| ├── pages

| | ├── index.less

| └── index.tsx

| └── app.ts

.umirc.ts

配置文件，包含 umi 内置功能和插件的配置。

.env

环境变量。

比如：

PORT=8888

COMPRESS=none

public 目录

静态文件，此目录下所有文件会被 copy 到输出路径。

src 目录

.umi 目录

临时文件，入口文件、路由等都会被临时生成到这里。不要提交该文件，该文件会在启动和构建时重新生成。

layouts/index.tsx

约定式路由时的全局布局文件。

app.ts

运行时的配置文件，可以在这里扩展运行时的能力，比如修改路由、修改 render 方法，请求拦截等。

4.配置

包括路由，代理，假数据，布局，主题，加密，一些umi内置的配置等等都在这里配置。

可以在**.umirc.ts

文件配置，也可以在

config/config.ts**中配置，一般项目比较复杂的话可以在config里面配置，可以不要.umirc.ts文件。

.umirc.ts文件中配置

config中配置，

5.运行时配置（src/app.tsx）

umi约定

src/app.tsx

中的配置为运行时配置，一般可以引入一些浏览器依赖，可以再这里拦截路由，拦截请求等等

6.路由

配置路由

路由

在 .umirc.ts 或 config/config.ts文件中配置路由。

如果项目的配置不复杂，推荐在 .umirc.ts 中写配置；如果项目的配置比较复杂，可以将配置写在 config/config.ts 中，并把配置的一部分拆分出去，比如路由配置可以拆分成单独的 routes.ts

export default {
  routes: [
    { path: '/login', component: 'login' },
    {
      path: '/',
      component: '@/layouts/index',
      routes: [
        { path: '/list', component: 'list' },
        { path: '/admin', component: 'admin' },
      ],
    }, 
  ],
}

路由跳转

import { history } from 'umi';
history.push('/login');
history.replace('/login');
history.goBack();

路由参数

从组件的props中可以获取一下参数

• match：包含params、url、path、isExact，路由，参数等
• location：包含pathname、search、query，params,路由名，参数等
• history：当前进入路由使用的action(如”PUSH”)，以及umi路由history的一些#api
• route：当前路由配置
• router：全部路由配置

路由传参：

history.push(’/detail/123234’); 这样传参，参数在props.match.params

history.push({pathname: ‘/detail’, query:{id: 12334}}); 参数在props.location.query

约定式路由

无需routers配置，通过分析

src/pages

文件下目录和文件，

自动生成路由

的方式叫做约定式路由，或者文件路由。

无嵌套无参数的路由

目录：

├── pages

| ├── index.tsx

| └── users.tsx

路由：

[
  { exact: true, path: '/', component: '@/pages/index' },
  { exact: true, path: '/users', component: '@/pages/users' },
]

有嵌套的路由

子目录下有_layout.tsx文件，才会生成嵌套路由, layout 文件需要返回一个 React 组件，并通过 props.children 渲染子组件。

目录：

├── pages

| ├── users

| | ├── layout.tsx

| | ├── index.tsx

| | └── list.tsx

路由：

[
  { exact: false, path: '/users', component: '@/pages/users/_layout',
    routes: [
      { exact: true, path: '/users', component: '@/pages/users/index' },
      { exact: true, path: '/users/list', component: '@/pages/users/list' },
    ]
  }
]

全局的layout， 约定 src/layouts/index.tsx 为全局路由。返回一个 React 组件，并通过 props.children 渲染子组件。

目录：

.

└── src

├── layouts

│ └── index.tsx

└── pages

├── index.tsx

└── users.tsx

路由

[
  { exact: false, path: '/', component: '@/layouts/index',
    routes: [
      { exact: true, path: '/', component: '@/pages/index' },
      { exact: true, path: '/users', component: '@/pages/users' },
    ],
  },
]

一个自定义的全局 layout 如下：

import { IRouteComponentProps } from 'umi'
export default function Layout({ children, location, route, history, match, }: IRouteComponentProps) {
  return children
}

有参数的路由(动态路由)

目录：

└── pages

│ ├── index.tsx

│ ├── users

│ ├── [id].tsx

│ └── [name$].tsx

路由：

[
  { exact: true, path: '/', component: '@/pages/index' },
  { exact: true, path: '/users/:id', component: '@/pages/users/[id]' },
  { exact: true, path: '/users/:name?', component: '@/pages/users/[[name$]]' }
]

7.插件

umi有很多的插件，比如@umijs/plugin-initial-state、@umijs/plugin-access、@umijs/plugin-request、@umijs/plugin-model、@umijs/plugin-sass