umi使用记录

最新推荐文章于 2023-06-03 11:57:37 发布

Cutey.

最新推荐文章于 2023-06-03 11:57:37 发布

阅读量1.5k

点赞数

分类专栏： umi 文章标签： react

本文链接：https://blog.csdn.net/qq_42161935/article/details/111216841

版权

umi 专栏收录该内容

3 篇文章

订阅专栏

1.umi是什么？

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

2.环境

// 创建项目

$ yarn create @umijs/umi-app

// 安装依赖

$ yarn

// 启动项目

$ yarn start

// 构建

$ yarn build

// 本地验证服务

$ yarn global add serve
serve ./dist

3.目录

.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 渲染子组件。

[
  { 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$]]' }
]