使用UmiJS框架开发React

1、什么是Umi.js?

umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。你可以将它简单的理解为一个专注性能的类 next.js前端框架，并通过约定、自动生成和解析代码等方式来辅助开发，减少我们开发者的代码量。

2、为什么使用Umi.js?

我们做react开发的时候会不会遇到以下问题？：
2.1 项目做大的时候，开发调试的启动和热更新时间会变得很长。
2.2 大应用下，网站打开很慢，有没有办法基于路由做到按需加载。
2.3 dva的model每次都要手写载入，能否一开始就同项目初始化好？

使用乌米，即可解决以上问题，并且还能提供如下优势：

• 开箱即用，内置 react、react-router 等
• 类 next.js 且功能完备的路由约定，同时支持配置的路由方式
• 完善的插件体系，覆盖从源码到构建产物的每个生命周期
• 一键兼容到 IE9
• 完善的 TypeScript 支持
• 与 dva 数据流的深入融合

3、开箱即用的中台前端/设计解决方案 ANT DESIGN PRO

1. 优雅美观 - 基于 Ant Design 体系精心设计
2. 常见设计模式 - 提炼自中后台应用的典型页面和场景
3. 最新技术栈 - 使用 React/dva/antd 等前端前沿技术开发
4. 响应式 - 针对不同屏幕大小设计
5. 主题 - 可配置的主题满足多样化的品牌诉求
6. 国际化 - 内建业界通用的国际化方案
7. 最佳实践 良好的工程实践助你持续产出高质量代码
8. Mock 数据 - 实用的本地数据调试方案
9. UI 测试 - 自动化测试保障前端产品质量

4、安装Umi

npm create umi `projectName`
Select the boilerplate type (Use arrow keys)
❯ ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
  app             - Create project with a simple boilerplate, support typescript.
  plugin          - Create a umi plugin.

选择 ant-design-pro -> Pro V4 -> JavaScript Ant Design Pro 脚手架将会自动安装。

5、常用目录说明

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
│   └── ......
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── locales              # 国际化
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.jsx           # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

6、运行项目

cd `projectName`
npm install
npm start

7、把之前组件，引入到 antd design pro 项目中

React 快速上手实践

• 移动 ClassComponent \ FunctionComponent 到 components 目录下
• 修改 Welcome.jsx，使用 ClassComponent \ FunctionComponent 组件

import React from "react";
import { PageContainer } from "@ant-design/pro-layout";
import { Card, Alert, Divider } from "antd";
import { useIntl } from "umi";
// @/ 为引入别名方式，减少引用前缀
import ClassComponent from "@/components/ClassComponent";
import FunctionComponent from "@/components/FunctionComponent";
import styles from "./Welcome.less";
export default () => {
  // 使用国际化，对应 locales 目录下对应文件国际化文案
  const intl = useIntl();
  return (
    <PageContainer>
      <Card>
        <Alert
          message={intl.formatMessage({
            id: "pages.welcome.alertMessage",
            defaultMessage: "欢迎使用",
          })}
          type="success"
          showIcon
          banner
        />
        <ClassComponent title="Class 组件" />
        <Divider />
        <FunctionComponent title="Function 组件" />
      </Card>
    </PageContainer>
  );
};

8、添加自定义界面

• 由于 antd design pro 集成了 umi、antd （@ant-design/xxx）、dva、react-router-dom（路由） … 等一系列组件和插件，直接可以使用
• umi 预定式路由，直接在 pages 目录下创建对应文件（文件名称和访问时 url 一致）

1. 在 pages 目录下创建 Order\list 目录，list 下创建 idnex.jsx （为显示界面）

const OrderList = () => {
  return <div>订单列表</div>;
};
export default OrderList;

1. 在 config 目录 routes.js 文件中添加

{
  name: 'order.list',
  icon: 'table',
  path: '/order/list',
  component: './Order/list',
},

• name 菜单显示名称（国际化）
• icon 菜单显示图标
• path 路由访问地址
• component 当前路由显示组件
• authority 权限[],只有在数组中的权限才显示 [‘admin’] 只有 admin 权限才显示 [‘user’] user 权限才显示

1. 在 locales\zh-CN 目录，menu.js 文件添加和 name 对应中文，显示菜单名称

  'menu.order.list': '订单列表',

如果不设置，默认显示 name 对应的字符串，即 ‘order.list’

9、dva 状态管理

• 默认集成了 dva, 直接使用即可。
• 添加一个用户列表界面，把 [React 快速上手实践代码移过来即可

注意:

1. 由于 antd design pro routes.js 中存在了 user 路由，需要加上 exact: true, 才能加 user.list，因为在 routers.js 中使用布局不一样。
2. 详细见 移植代码

...
path: '/user',
exact: true,
component: '../layouts/UserLayout',
{
    name: 'order.list',
    icon: 'table',
    path: '/order/list',
    component: './Order/list',
},
    {
    name: 'user.list',
    icon: 'table',
    path: '/user/list',
    component: './User/list',
},
...

antd design pro @ant-design/pro-layout

• 使用 PageContainer
• PageContainer 组件可以获取当前页菜单名称，设置面包屑。

import { PageContainer } from "@ant-design/pro-layout";
<PageContainer>
  <Card>// Form body</Card>
</PageContainer>;

其他更多参考

其他设置在 config 目录中进行修改

总结：

• 可扩展，Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求。
• 开箱即用，Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能，可满足日常 80% 的开发需求。
• 企业级，经蚂蚁内部 3000+ 项目以及阿里、优酷、网易、飞猪、口碑等公司项目的验证，值得信赖。
• 大量自研，包含微前端、组件打包、文档工具、请求库、hooks 库、数据流等，满足日常项目的周边需求。
• 完备路由，同时支持配置式路由和约定式路由，同时保持功能的完备性，比如动态路由、嵌套路由、权限路由等等。
• 面向未来，在满足需求的同时，我们也不会停止对新技术的探索。比如 dll 提速、modern mode、webpack@5、自动化 external、bundler less 等等。