umi3使用记录前言✨ umi官网：https://umijs.org/zh-CN Umi(中文发音乌米)基于react

前言✨

Umi(中文发音乌米)基于react，是蚂蚁金服的底层前端框架，是可扩展的企业级前端应用框架，具备优秀的兼容能力、完整的路由模式、大量自研工具库等，但是在实际应用中也是需要踩坑前进。

安装⏳

1.首先建立空文件夹并进入umi3-demo

$ mkdir umi3-demo && cd umi3-demo

2.通过官方工具创建项目

$ yarn create @umijs/umi-app
or npx @umijs/create-umi-app

3.安装依赖

yarn

4.启动项目

yarn start

路由📡

umi3路由形式分为两种

配置路由

可以理解为我们开发vue或者react时需要建立的routes.js。

1.在src目录下建立文件routers，在routers内建立js/ts文件

2.配置路由

const routes = [
  {
    title: '登录',
    path: '/login',
    component: '@/pages/login',
  },
  {
    title: '首页',
    path: '/',
    component: '@/layout/index',
    // routes：配置子路由，因为以下路由都是在layout组件中跳转的
    routes: [
      {
        title: '文章管理',
        path: '/articleManage',
        exact: true,
        component: '@/pages/article',
      },
      {
        title: '标签管理',
        path: '/labelManage',
        exact: true,
        component: '@/pages/labelManage',
      },
    ],
  },
];
export default routes;

3.引入路由文件，在根目录 .umirc.ts文件中

import Routes from './src/routers';
import { defineConfig } from 'umi';
export default defineConfig({
  metas: [
    {
      name: 'keywords',
      content: 'umi, umijs',
    },
    ...
  ],
  routes: Routes,
});

约定式路由

也叫文件路由，如果没有 routes 配置，Umi 会进入约定式路由模式，然后分析 src/pages 目录拿到路由配置。

比如以下文件结构：

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

会得到以下路由配置：

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

启用插件和config配置

umi中内置了很多插件，可以开箱即用，只需要在.umirc.ts文件中启用即可

import { defineConfig } from 'umi';
import Routes from './src/routers';
export default defineConfig({
  publicPath: './',
  // history: { type: 'hash' }, //路由模式
  // base: '/admin/', // 路由增加前缀(适用于网站不在根目录下使用)
  title: 'JayShen博客管理',
  nodeModulesTransform: {
    type: 'none',
  },// 设置 node_modules 目录下依赖文件的编译方式
  fastRefresh: {},// 快速刷新，开发时可以保持组件状态，同时编辑提供即时反馈
  locale: {
    default: 'zh-CN',
    antd: true, // ant国际化
    title: true, // 页面标题国际化
  },
  antd: {},// 开启antd
  dva: {
    immer: true, // 方便修改 reducer
    hmr: true, // 热更新,
  },// 开启dva
  theme: {
    '@brand-primary': 'green'
  },// 主题色
  metas: [
    {
      name: 'keywords',
      content: 'umi, umijs',
    },
  ],
  routes: Routes,
});

环境变量

1.安装cross-env，因为要修改package.json的script命令，为了兼容OS X和Windows系统，所以需要借助cross-env

yarn add cross-env
#or
npm install cross-env -S

2.创建不同环境配置文件

umi提供了环境变量UMI_ENV区分不同环境来指定配置，意思是会根据UMI_ENV的值来选择哪一个.umirc.xxx.ts的配置，并且会和.umirc.ts做深比较，对配置进行合并，因此根据我们修改的UMI_ENV='xxx'，我们需要创建对应的.umirc.xxx.ts

3.package.json文件，根据不同命令修改UMI_ENV的赋值

CURRENT_ENV:当前环境

BASE_URL:当前请求接口

  "scripts": {
    "start": "cross-env UMI_ENV=dev umi dev",
    "build:test": "cross-env UMI_ENV=test umi build",
    "build": "cross-env UMI_ENV=prod umi build",
  },

// .umirc.prod.ts
import { defineConfig } from 'umi';
export default defineConfig({
  define: {
    CURRENT_ENV: 'prod',
    BASE_URL: 'https://www.jayshen1943.com',
  },
});
// .umirc.test.ts
export default defineConfig({
  define: {
    CURRENT_ENV: 'test',
    BASE_URL: 'testBase',
  },
});
//
import { defineConfig } from 'umi';
export default defineConfig({
  define: {
    CURRENT_ENV: 'dev',
    BASE_URL: 'https://www.jayshen1943.com',
  },
});

路由守卫

在配置式路由文件里面加入wrappers，配置路由组件的包装组件，通过包装组件可以为当前的路由组件组合进更多的功能。如：可以用于路由级别的权限校验、判断用户是否登录并退回首页等

// routers/index.ts
const routes = [
  {
    title: '登录',
    path: '/login',
    component: '@/pages/login',
  },
  {
    title: '首页',
    path: '/',
    component: '@/layout/index',
    wrappers: ['@/routers/authRouter'],// 
    // 所有路由都写到routes里面
    routes: [
      {
        title: 'demo',
        path: '/demo',
        exact: true,
        component: '@/pages/demo',
        // customComponent: Demo
      },
    ],
  },
];
export default routes;

// routers/authRouter.tsx
import { useLocation } from 'umi';
export default (props: any) => {
    const location = useLocation()
    console.log(location.pathname);
    return <div>{props.children}</div>
}