安装

umi3推荐使用yarn进行安装：

yarn create @umijs/umi-app

安装脚手架之后需要安装依赖

yarn

启动

yarn start

目录结构

.
├── package.json ：包依赖
├── .umirc.ts    ：配置文件
├── .env         ：环境变量
├── dist         ：打包后的目录
├── mock         ：存放mock文件
├── public       ：静态资源
└── src          
    ├── .umi             ：动态生成编译目录，可删除
    ├── layouts/index.tsx ：约定式路由的全局布局文件
    ├── pages             ：路由组件(约定式路由自动生成)
        ├── index.less    
        └── index.tsx
    └── app.ts           ：运行的入口文件，可以手动创建

配置文件

umi可以在.umirc.ts或者config/config.ts中设置配置项，但.umirc.ts文件存在，则其他的配置文件不会生效，如果配置项不复杂推荐在.umirc.ts进行配置，为防止.umirc.ts自动生成，可以加后缀名：.umirc.ts.bak

配置文件中需要从umi中引入defineConfig

import { defineConfig } from 'umi';
export default defineConfig ({配置项})

如果您使用的是配置式路由，使用config.ts，将路由抽离到该目录下的routes.ts文件中，该文件需要一个routerType.ts文件选择路由模式。

// config/routes.ts


export default [
    { path: '/', component: '@/pages/index', title: '我是首页' },
];

// config/config.ts


import { defineConfig } from 'umi';
import routes from './routes';
import routerType from './routerType';


export default defineConfig({
  routes: routes,
});

// config/routerType.ts
import { defineConfig } from 'umi';

export default defineConfig({
  // 路由模式
  history: {
    type: 'browser',
  },
});

umi官方文档包含了很多全局配置项，拿其中的几个举例

  // 统一设置
  title: 'umijs',// 全局标题，不建议全局使用
  404: false,   // 约定式路由中是否开启404页面
  favicon: '/favicon.ico', //页面图标
 chainWebpack(memo, { env, webpack, createCSSRule }) {
    // 设置 alias
    memo.resolve.alias.set('foo', '/tmp/a/b/foo');
    // 删除 umi 内置插件
    memo.plugins.delete('progress');
    memo.plugins.delete('friendly-error');
    memo.plugins.delete('copy');
  },// 通过 [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain) 的 API 修改 webpack 配置

定义代理

// config/config.js
  proxy: {
    '/api': {
      target: 'http://127.0.0.1/',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    },
  },

约定式路由

文件或目录按照umijs框架所要求的来创建，它会自动的给你生成对应的路由

.
  └── pages
    ├── index.tsx
    └── login.tsx

生成这样的路由表

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

但不是任何类型的文件都会被注册进路由表，具体参照官方文档

动态路由

约定 [] 包裹的文件或文件夹为动态路由

按照如下的格式命名目录和文件

src/pages/detail/[id].tsx => /users/:id

src/pages/detail/[id]/goods.tsx =>/users/:id/goods

动态可选路由

src/pages/users/[id$].tsx => /users/:id?

嵌套路由

在umijs约定式路由中，嵌套路由的定义，需要在该路径对应的文件夹下创建layout.tsx文件，成为该路由的layout文件，即在每个路由组件中都存在，而子路由的定义需要在该layout.tsx文件中利用props.children渲染。

.
└── pages
    └── admin
        ├── _layout.tsx
        ├── index.tsx
        └── welcome.tsx

// admin/layout.tsx
import React from 'react';
const Layout = ({ children }) => {
  return (
    <div>
      <h1>这里式layout</h1>
      <hr />
      {children}
    </div>
  );
};
export default Layout;

// admin/index.tsx
import React from 'react';
const Admin = () => {
  return (
    <div>
      <h3>admin的首页</h3>
    </div>
  );
};
export default Admin;

// admin/welcome.tsx
import React from 'react';
const Welcome = () => {
  return <div>我是admin下面的欢迎</div>;
};
export default Welcome;

全局layout

src/layouts/index.tsx

该文件为全局的layout,在所有的路由组件中都存在。

import React from 'react';
const Index = ({children}) => {
  return (
    <div>
      <h1>我是全局的布局</h1>
      <hr />
      {children}
    </div>
  );
};
export default Index;

404路由

在pages下创建404.tsx,则不可到达的路由都会到达这里。

.
└── pages
    ├── 404.tsx
    ├── index.tsx
    └── users.tsx

权限路由wrappers

wrappers的实质是高阶组件，通过在需要定义权限的路由中引入weappers高阶组件，在wrappers中进行条件判断，并且利用重定向，实现权限校验，路由跳转等目的。

// 定义：src/pages/wrappers/auth.tsx
import React from 'react';
import { Redirect } from 'umi';
const Auth = ({ children }) => {
  // 是否登录判断
  if (.......) {
  // 条件不满足直接跳转
    return <Redirect to="/login" />;
  }
  return <>{children}</>;
};
export default Auth;

// 使用：
import React from 'react';
const Layout = ({ children }) => {
  return (
    ...........
  );
};

// 使用权限路由：
Layout.wrappers = ['@/wrappers/auth']
export default Layout;

拓展属性路由

在代码层通过导出静态属性的方式扩展路由。

import React from 'react';
const Admin = () => {
  return ( ... );
};
// 拓展属性
Admin.title = 'Home Page';
export default Admin;

配置式路由

在项目根目录下面.umirc.ts中去配置或在config/config.ts中配置的路由规则就称为配置式路由，对于js对象来配置对应路由规则，可以定义routes.ts文件书写路由配置项，在config.js中的routes项中配置。

// config/routes.ts
// 路由表配置项
import { defineConfig } from 'umi';
export default [
  // path 规则
  // component 渲染的组件，字符串
  { path: '/', component: '@/pages/index', title: '首页' },
  { path: '/login', component: '@/pages/login' },
  { path: '/about', component: '@/pages/about' },
  {
    path: '/admin',
    component: '@/pages/admin',
    // 在该路由中使用权限
    wrappers: [
      '@/wrappers/auth',
    ],
    routes: [{ path: 'welcome', component: '@/pages/admin/welcome' }],
  },
  // 重定向
  { path: '/aaa', redirect: '/login' },
  { path: '/news/:id', component: '@/pages/news' },
  { path: '*', component: '@/pages/404' },
];

// 引入路由规则
import routesList from './routes';
import { defineConfig } from 'umi';
import routerType from './routerType';
export default defineConfig({
.......... // 此处省略一大片
  // 路由
  routes: routesList,
});

插件

umi非常重要的一篇，针对react应用的插件集，一下参考自官方文档：包含：

plugin-access，权限管理
plugin-analytics，统计管理
plugin-antd，整合 antd UI 组件
plugin-crossorigin，通常用于 JS 出错统计
plugin-dva，整合 dva
plugin-helmet，整合 react-helmet，管理 HTML 文档标签（如标题、描述等）
plugin-initial-state，初始化数据管理
plugin-layout，配置启用 ant-design-pro 的布局
plugin-locale，国际化能力
plugin-model，基于 hooks 的简易数据流
plugin-request，基于 umi-request 和 umi-hooks 的请求方案

.......

Umi 3 的知识整理

安装