react+umijs 项目快速学习

一、Umijs是什么

Umi，中文可发音为乌米，是可扩展的企业级前端应用框架，是蚂蚁集团的底层前端框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

一句话： "Umi = React + 路由 + 构建工具 + 插件生态"

二、快速上手

1.1 环境准备

首先得有 node，并确保 node 版本是 10.13 或以上。（mac 下推荐使用 nvm 来管理 node 版本）

ruby 复制代码

$ node -v
v10.13.0

推荐使用 yarn 管理 npm 依赖，并使用国内源（阿里用户使用内网源）。

ruby 复制代码

# 国内源
$ npm i yarn -g
$ yarn -v

安装 Umi

csharp 复制代码

# 使用 yarn（推荐） 
yarn add umi -g 
# 或者使用 npm 
npm install umi -g

# 检查是否安装成功
umi -v

1.2 脚手架

先找个地方建个空目录。

perl 复制代码

$ mkdir my-umi-app && cd my-umi-app

umi init

通过官方工具创建项目

ruby 复制代码

$ yarn create @umijs/umi-app

1.3 安装依赖

erlang 复制代码

$ yarn

yarn install v1.21.1
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.71s.

常见目录结构

js 复制代码

my-umi-app/
├── src/
│   ├── layouts/              # 全局布局组件
│   ├── pages/                # 页面目录（自动路由）
│   │   └── index.tsx         # 首页
│   │   └── about/index.tsx   # /about 路由
│   ├── app.tsx               # 入口配置文件
│   └── models/               # 全局状态管理模型（如果用了 dva）
├── .umirc.ts                 # 主配置文件
└── package.json

1.4 启动项目

arduino 复制代码

$ yarn start


Starting the development server...

✔ Webpack
  Compiled successfully in 17.84s
  
 DONE  Compiled successfully in 17842ms                                       8:06:31 PM

  App running at:
  - Local:   http://localhost:8000 (copied to clipboard)
  - Network: http://192.168.12.34:8000

在浏览器里打开 http://localhost:8000/，能看到界面了

1.5 部署发布

项目构建

erlang 复制代码

$ yarn build

✔ Webpack
  Compiled successfully in 17.17s

 DONE  Compiled successfully in 17167ms                                       8:26:25 PM

Build success.
✨  Done in 20.79s.

构建产物默认生成到 ./dist 下，然后通过 tree 命令查看，

bash 复制代码

tree ./dist


./dist
├── index.html
├── umi.css
└── umi.js

1.6 本地验证

发布之前，可以通过 serve 做本地验证，

csharp 复制代码

$ yarn global add serve
$ serve ./dist


   ┌────────────────────────────────────────────────────┐
   │                                                    │
   │   Serving!                                         │
   │                                                    │
   │   - Local:            http://localhost:5000        │
   │   - On Your Network:  http://192.168.12.34:5000    │
   │                                                    │
   │   Copied local address to clipboard!               │
   │                                                    │
   └────────────────────────────────────────────────────┘

访问 http://localhost:5000，正常情况下应该是和执行 yarn start 时是一致的。

1.7 部署

本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。

三、Umi 基础

1.核心配置 `.umirc.ts`

js 复制代码

// .umirc.ts
import { defineConfig } from 'umi';

export default defineConfig({
  // 开启 TypeScript 支持
  plugins: ['@umijs/plugins/dist/tailwindcss', '@umijs/plugins/dist/dva'],
  
  // 路由配置
  routes: [
    { path: '/', component: '@/pages/index' },
    { path: '/about', component: '@/pages/about/index' },
  ],
  
  // 是否启用 hash 路由（默认是 browserHistory）
  history: {
    type: 'hash',
  },
  
  // 启用 dva 状态管理
  dva: {},
  
  // 设置主题（例如 Ant Design 的变量覆盖）
  theme: {
    '@primary-color': '#1DA57A',
  },
  
  // 配置代理（开发环境）
  devServer: {
    proxy: {
      '/api': {
        target: 'https://your-api.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
  },
});

2.常用功能详解

2.1 路由配置（约定式 + 配置式）

- 约定式路由（无需手动配置）

在 src/pages 下新建文件夹即可自动生成路由：

js 复制代码

src/pages/user/list/index.tsx → 路由为 /user/list

- 配置式路由（在 .umirc.ts 中定义）

js 复制代码

routes: [
  { path: '/user/:id', component: '@/pages/user/detail' },
  { path: '/login', component: '@/pages/login', layout: false }, // 不使用布局
]

2.2 布局组件（Layout）

创建 src/layouts/index.tsx：

js 复制代码

import React from 'react';

const Layout: React.FC = ({ children }) => {
  return (
    <div>
      <header>这是全局头部</header>
      <main>{children}</main>
      <footer>这是全局底部</footer>
    </div>
  );
};

export default Layout;

2.3 状态管理（Dva）

安装 dva 插件

js 复制代码

npm install @umijs/plugin-dva --save

创建 model 文件：src/models/userModel.ts

js 复制代码

export default {
  namespace: 'user',
  state: {
    name: '小明',
    age: 20,
  },
  reducers: {
    setName(state, { payload }) {
      return { ...state, name: payload };
    },
  },
};

在页面中使用：

js 复制代码

import React from 'react';
import { connect } from 'dva';

const IndexPage = (props) => {
  const { user, dispatch } = props;

  return (
    <div>
      <h1>姓名：{user.name}</h1>
      <button onClick={() => dispatch({ type: 'user/setName', payload: '小红' })}>
        修改名字
      </button>
    </div>
  );
};

export default connect(({ user }) => ({ user }))(IndexPage);

2.4 请求封装（推荐使用 ahooks + fetch）

安装 ahooks：

js 复制代码

npm install ahooks

创建 src/utils/request.ts：

js 复制代码

import { message } from 'antd';

const request = async (url: string, options: any = {}) => {
  const res = await fetch(url, {
    ...options,
    headers: {
      'Content-Type': 'application/json',
      ...options.headers,
    },
  });

  if (!res.ok) {
    message.error('请求失败');
    throw new Error(res.statusText);
  }

  return await res.json();
};

export default request;

在页面中使用：

js 复制代码

import useRequest from 'ahooks/lib/useRequest';

const fetchData = async () => {
  const data = await request('/api/users');
  return data;
};

const UserList = () => {
  const { data, loading } = useRequest(fetchData);

  return (
    <div>
      {loading ? '加载中...' : JSON.stringify(data)}
    </div>
  );
};

3.常用插件推荐

插件名	插件名
@umijs/plugin-dva	Dva 状态管理
@umijs/plugin-tailwindcss	Tailwind CSS 支持
@umijs/plugin-antd	Ant Design 支持
@umijs/plugin-access	权限控制
@umijs/plugin-layout	自动化布局
@umijs/plugin-qiankun	微前端支持

react+umijs 项目快速学习

一、Umijs是什么

二、快速上手

1.1 环境准备

1.2 脚手架

1.3 安装依赖

常见目录结构

1.4 启动项目

1.5 部署发布

1.6 本地验证

1.7 部署

三、Umi 基础

1.核心配置 .umirc.ts

2.常用功能详解

2.1 路由配置（约定式 + 配置式）

2.2 布局组件（Layout）

2.3 状态管理（Dva）

2.4 请求封装（推荐使用 ahooks + fetch）

3.常用插件推荐

1.核心配置 `.umirc.ts`