4-4 快速上手UmiJS
UmiJS 简介
UmiJS（简称 Umi，中文"乌米/五米"）是蚂蚁集团开源的企业级前端应用框架，在国内 React 生态中占据重要地位。它是一个插件化的框架，内置了路由、构建、部署、测试等企业级应用所需的全部功能。
核心特点：
- 插件化架构——所有功能通过插件提供，按需加载
- 约定优于配置——通过目录约定自动生成路由
- 开箱即用——内置 TypeScript、ESLint、样式方案等
- 完善的中文文档
快速开始
环境准备
# 确保 Node.js 版本 >= 14
node -v
# 创建 Umi 项目（推荐使用 @umijs/max）
npx create-umi@latest
# 选择模板：Ant Design Pro / Simple App / Max Template
bash
使用 Umi Max（推荐）
Umi Max 是 Umi 的增强版，集成了更多企业级功能：
# 创建 Umi Max 项目
npx create-umi@latest --template max
bash
项目结构
my-umi-app/
├── src/
│ ├── pages/ # 页面（约定式路由）
│ │ ├── index.tsx # 首页
│ │ └── about.tsx # 关于页
│ ├── layouts/ # 布局组件
│ ├── components/ # 公共组件
│ ├── services/ # API 服务
│ ├── models/ # 数据模型
│ ├── utils/ # 工具函数
│ ├── app.ts # 运行时配置
│ └── .umi/ # 自动生成的临时文件
├── .umirc.ts # Umi 配置文件
├── package.json
└── tsconfig.json
text
约定式路由
Umi 最大的特色之一是约定式路由——不需要手动配置路由，根据 pages/ 目录结构自动生成：
src/pages/
├── index.tsx → /
├── about.tsx → /about
├── users/
│ ├── index.tsx → /users
│ └── [id].tsx → /users/:id（动态路由）
└── settings.tsx → /settings
text
核心配置
// .umirc.ts
import { defineConfig } from 'umi';
export default defineConfig({
routes: [
{ path: '/', component: 'index' },
{ path: '/about', component: 'about' },
],
// 或者使用约定式路由（不配置 routes 即可）
npmClient: 'pnpm',
hash: true, // 文件名加 hash
antd: {}, // 启用 Ant Design
dva: {}, // 启用 DVA 状态管理
locale: {}, // 启用国际化
proxy: { # 开发环境代理
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
},
},
});
typescript
开发命令
# 启动开发服务器
umi dev
# 构建生产版本
umi build
# 运行测试
umi test
# 代码格式化
umi lint
bash
Umi 4 与 Umi 3 的区别
| 维度 | Umi 3 | Umi 4 / Umi Max |
|---|---|---|
| 配置文件 | .umirc.ts | .umirc.ts（兼容） |
| 构建工具 | Webpack | Webpack / Vite |
| MFSU | 实验性 | 默认启用，大幅提速 |
| React 版本 | React 17 | React 18 |
| TypeScript | 默认启用 | 默认启用 |
| 插件体系 | 插件化 | 插件化（更多内置插件） |
常用场景示例
创建页面
// src/pages/users/index.tsx
import { useRequest } from 'umi';
import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
interface User {
id: number;
name: string;
email: string;
}
const columns: ColumnsType<User> = [
{ title: 'ID', dataIndex: 'id' },
{ title: 'Name', dataIndex: 'name' },
{ title: 'Email', dataIndex: 'email' },
];
export default function UsersPage() {
const { data, loading } = useRequest('/api/users');
return <Table columns={columns} dataSource={data} loading={loading} rowKey="id" />;
}
tsx
DVA 数据流
// src/models/userModel.ts
import { useState, useCallback } from 'react';
export default function useUserModel() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(false);
const fetchUsers = useCallback(async () => {
setLoading(true);
const res = await fetch('/api/users');
const data = await res.json();
setUsers(data);
setLoading(false);
}, []);
return { users, loading, fetchUsers };
}
typescript
Umi 是国内 React 企业级开发的首选框架，配合 Ant Design 和 DVA，能够快速搭建功能完备的后台管理系统。
↑