react umi

React 是一个用于构建用户界面的 JavaScript 库，Umi 是一个可扩展的企业级前端应用框架，以下是二者的相关信息： ### 简介 简单来说，Umi 可以理解为 roadhog + 路由，思路类似 next.js/nuxt.js，辅以一套插件机制，目的是通过框架的方式简化 React 开发 [^1]。 ### 使用指南 #### 安装 首先需要确保系统已经安装了 Node.js 和 npm。然后可以通过以下命令创建一个新的 Umi 项目： ```bash npx create-umi@latest my-app cd my-app ``` #### 项目结构 Umi 项目有其特定的目录结构，常见的目录和文件如下： ```plaintext my-app ├── .umirc.ts # Umi 配置文件 ├── src │ ├── pages # 页面目录 │ │ └── index.tsx │ └── app.ts # 全局初始化文件 └── package.json ``` #### 编写页面 在 `src/pages` 目录下创建页面组件，例如 `src/pages/index.tsx`： ```jsx import React from 'react'; const HomePage = () => { return ( <div> <h1>Welcome to my Umi + React app!</h1> </div> ); }; export default HomePage; ``` #### 启动项目 在项目根目录下运行以下命令启动开发服务器： ```bash npm run dev ``` 然后在浏览器中访问 `http://localhost:8000` 即可看到页面。 ### 开发技巧 #### 路由配置 Umi 提供了约定式路由和配置式路由两种方式。约定式路由根据文件目录结构自动生成路由，例如 `src/pages/user.tsx` 对应 `/user` 路由。配置式路由则可以在 `.umirc.ts` 中手动配置： ```typescript import { defineConfig } from 'umi'; export default defineConfig({ routes: [ { path: '/', component: '@/pages/index' }, { path: '/user', component: '@/pages/user' }, ], }); ``` #### 插件使用 Umi 有丰富的插件生态，可以通过插件扩展项目功能。例如，安装 `@umijs/plugin-antd` 插件来使用 Ant Design 组件库： ```bash npm install @umijs/plugin-antd ``` 然后在 `.umirc.ts` 中启用插件： ```typescript import { defineConfig } from 'umi'; export default defineConfig({ plugins: ['@umijs/plugin-antd'], }); ``` ### 框架结合使用方法 Umi 可以和 Dva 结合使用，Dva 是一个纯粹的数据流管理工具。 #### 安装 Dva ```bash npm install dva ``` #### 初始化 Dva 应用 在 `src/app.ts` 中初始化 Dva 应用： ```typescript import dva from 'dva'; import React from 'react'; import { render } from 'umi'; // 1. Initialize const app = dva(); // 2. Plugins // app.use({}); // 3. Model app.model({ namespace: 'count', state: 0, reducers: { add(state) { return state + 1; }, }, effects: { *addAfter1Second(action, { call, put }) { yield call(delay, 1000); yield put({ type: 'add' }); }, }, }); // 4. Router app.router(() => <div>App</div>); // 5. Start app.start('#root'); function delay(timeout: number) { return new Promise((resolve) => { setTimeout(resolve, timeout); }); } ```