Umi框架使用详细教程demo,从快速入门到进阶

故梦梦

已于 2023-08-12 22:37:54 修改

阅读量1.4w

点赞数 6

文章标签： react.js reactjs 前端框架

于 2023-08-08 15:17:02 首次发布

本文链接：https://blog.csdn.net/qq_42704945/article/details/132167465

版权

本文详细介绍Umi框架，包括其特点、插件化体系、约定式路由、数据管理和状态管理等内容，以及如何从零开始搭建和配置项目，适合React开发者深入学习和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Umi 框架详细教程：从入门到进阶

引言

Umi 框架概述

Umi 是一个基于 React 的企业级前端应用框架。它提供了一整套的开发工具和开箱即用的最佳实践，帮助开发者快速构建高质量的前端应用程序。Umi 在网站开发、大型单页应用（SPA）、中后台管理系统等领域有广泛的应用。

特点和优点

插件化体系：Umi 使用了插件化体系，集成了众多常用且优秀的插件，如 dva、Ant Design 和 react-router 等。开发者可以选择性地使用这些插件来增强项目的功能。
约定式路由配置：通过约定式的目录结构，Umi 自动为项目生成路由配置，简化了路由配置的工作。
灵活的插件开发：Umi 提供了丰富的插件开发能力，开发者可以开发自定义插件，根据项目需求添加扩展功能。
开箱即用的最佳实践：Umi 集成了许多最佳实践，如自动刷新、按需加载、代码拆分、CSS Modules 等，降低了开发和维护成本，提高了开发效率。
完善的文档与社区：Umi 拥有完善的官方文档和活跃的社区支持，开发者可以快速查找解决方案、获取技术支持，并了解最新的发展动态。

应用场景

由于 Umi 的特点和优点，它在许多领域都有广泛的应用，特别是适用于以下应用场景：

企业级应用：Umi 提供了稳定可靠的架构和丰富的功能，适用于开发中大型的企业级前端应用。
中后台管理系统：Umi 提供了丰富的布局、页面和权限管理等功能，使开发者能够快速搭建中后台管理系统。
多页面应用：Umi 的路由配置非常灵活，可用于构建多页面应用，每个页面可以拥有独立的路由和功能。
开发框架和组件库：借助 Umi 提供的插件开发能力，开发者可以自定义开发框架或组件库，并发布为 Umi 插件供其他开发者使用。

总之，Umi 框架以其插件化的体系、约定式的路由配置、灵活的扩展能力和丰富的功能，成为 React 项目的首选框架之一。

环境搭建

在开始之前，请确保已安装了最新版的 Node.js，可以通过以下命令来验证是否安装成功：

node -v
npm -v

如果以上命令能正确输出对应的版本号，说明 Node.js 已成功安装。

接下来，我们可以使用 npm 来全局安装 Umi：

npm install -g umi

安装完成后，我们可以新建一个 Umi 项目：

umi create my-app

进入项目目录：

cd my-app

启动开发服务器：

umi dev

在浏览器中访问 http://localhost:8000，你会看到一个漂亮的 Umi 欢迎界面。

项目结构和配置

（解释 Umi 项目的基本结构和配置，包括路由配置、代理配置、布局配置等）

路由配置

Umi 使用了约定式路由，即根据约定的目录结构生成路由配置。在 src/pages 目录下创建一个页面，如 home.js，Umi 会自动为你生成路由配置。

// src/pages/home.js
export default function Home() {
  return (
    <div>
      <h1>Welcome to Home Page</h1>
    </div>
  );
}

代理配置

在 config/config.js 中可以配置代理。例如，将所有 /api 开头的请求代理到 https://api.example.com：

export default {
  proxy: {
    '/api': {
      target: 'https://api.example.com',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    },
  },
};

布局配置

Umi 使用 layout 组件来配置通用布局组件。在 src/layouts 目录下添加一个布局文件，如 BasicLayout.js：

// src/layouts/BasicLayout.js
import { Layout } from 'antd';

export default function BasicLayout(props) {
  return (
    <Layout>
      <Layout.Header>Header</Layout.Header>
      <Layout.Content>{props.children}</Layout.Content>
      <Layout.Footer>Footer</Layout.Footer>
    </Layout>
  );
}

在 config/config.js 中配置默认的布局组件：

export default {
  layout: {
    name: 'BasicLayout',
    // 其他配置项
  },
};

页面开发与路由

在 src/pages 目录下创建一个页面文件，如 about.js：

// src/pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
    </div>
  );
}

Umi 会自动为你生成路由配置。

路由传参和动态路由

在 Umi 中，你可以在路由中使用动态参数：

// src/pages/user/[id].js
import { useParams } from 'umi';

export default function User() {
  const { id } = useParams();

  return (
    <div>
      <h1>User ID: {id}</h1>
    </div>
  );
}

路由配置

路由配置存储在 config/config.js 中，你可以在该文件中进行自定义配置，如页面权限、路由嵌套等。

export default [
  { path: '/', component: '@/pages/home' },
  { path: '/about', component: '@/pages/about' },
  { path: '/user/:id', component: '@/pages/user/[id]' }, ]

项目打包与部署打包命令

在项目根目录下运行以下命令进行项目打包：

umi build
  
  : '@/pages/user/[id]' },
];

打包完成后，将生成的文件部署到服务器或静态文件托管服务。

部署配置

Umi 可以根据不同的部署环境使用不同的配置。在 config/config.js 中，可以根据 process.env.NODE_ENV 环境变量进行不同配置的判断。

export default {
  ...,

  // 生产环境配置
  ...(process.env.NODE_ENV === 'production'
    ? {
        // 生产环境配置项
      }
    : {}),

  // 开发环境配置
  ...(process.env.NODE_ENV === 'development'
    ? {
        // 开发环境配置项
      }
    : {}),
};

常见的技术选项

Umi 提供了许多技术选项，如替换 HTML 模板、启用 CSS Modules、使用 TypeScript 等。这些选项可以在 config/config.js 中进行配置。例如，开启 CSS Modules：

export default {
  cssModules: true,
};

插件开发

使用 umi-plugin-create 脚手架命令创建一个空白插件：

umi create plugin my-plugin
cd my-plugin

创建插件后，进入插件目录，并运行 umi dev 启动插件开发服务器。

插件配置

在插件目录下的 .umirc.js 文件中，可以配置插件的功能和选项。

例如，在插件目录下的 config.js 文件中，可以导出一个函数，用于修改 Umi 的配置：

export default function(config) {
  // 修改配置
  config.routes.push({ path: '/my-plugin', component: '@/plugins/my-plugin' });

  return config;
}

使用插件

在 Umi 项目中使用插件非常简单。只需在项目的 .umirc.js 文件中，将插件的路径添加到 plugins 数组中即可。

export default {
  plugins: ['@/my-plugin'],
};

数据管理和状态管理

在 Umi 中，你可以使用 dva 进行数据管理和状态共享，它是一个基于 React 和 Redux 的轻量级状态管理框架。下面将详细探讨 Umi 中的数据管理和状态管理。

安装 dva

首先，确保你的项目中已安装了 dva:

npm install dva

创建 Model

在 Umi 中，你可以使用 Model 来管理数据和状态。创建一个 Model 很简单，只需要在 src/models 目录下创建一个文件，并定义 Model 的相关配置。

例如，我们在 src/models/user.js 中创建一个 User Model：

export default {
  namespace: 'user',
  state: {
    name: 'John Doe',
    age: 26,
  },
  reducers: {
    updateName(state, action) {
      return {
        ...state,
        name: action.payload,
      };
    },
  },
};

使用 Model

在 Umi 页面组件中，通过 connect 方法将 Model 的状态和 actions 连接到组件中：

import { connect } from 'umi';

function User({ user, dispatch }) {
  const { name, age } = user;

  const handleUpdateName = () => {
    dispatch({
      type: 'user/updateName',
      payload: 'Jane Smith',
    });
  };

  return (
    <div>
      <h1>User</h1>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <button onClick={handleUpdateName}>Update Name</button>
    </div>
  );
}

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

在上述代码中，我们通过 connect 方法将 user Model 的状态和 actions 注入到组件的属性中，使得我们可以通过 props 访问和修改用户数据。

在页面中访问 Model 的状态

在 Umi 中，你可以通过 connect 方法将 Model 的状态映射到页面组件的 props 中，并在组件中访问和使用。

例如，在 User 组件中，我们通过 connect 方法将 user Model 的状态映射到组件的 user 属性中，然后可以直接在组件中访问和使用 user 中的数据。

在页面中修改 Model 的状态

在 Umi 中修改 Model 的状态，你需要通过 dispatch 方法派发一个 action 来触发相应的 reducer。

在 User 组件的 handleUpdateName 方法中，我们使用 dispatch 方法来触发 user Model 的 updateName reducer，并传递新的用户名作为 payload。

const handleUpdateName = () => {
  dispatch({
    type: 'user/updateName',
    payload: 'Jane Smith',
  });
};

这会触发 user Model 中定义的 updateName reducer，更新状态中的 name 属性。

其他 Model 的配置

在 Model 的配置中，你可以使用 effects 属性定义异步操作，如调用 API 请求数据并更新状态。

export default {
  namespace: 'user',
  state: {
    name: '',
    age: null,
  },
  reducers: {
    updateName(state, action) {
      return {
        ...state,
        name: action.payload,
      };
    },
  },
  effects: {
    *fetchUser(action, { call, put }) {
      const response = yield call(api.fetchUser);
      yield put({
        type: 'updateName',
        payload: response.data.name,
      });
    },
  },
};

在上述代码中，我们定义了一个 fetchUser effect，它使用 call 函数调用 api.fetchUser 获取用户数据，并在获取成功后使用 put 函数触发 updateName reducer 来更新状态中的用户名。

单元测试

在 Umi 项目中进行单元测试，可以使用 Jest 或 Mocha 等测试框架。你可以创建一个名为 __tests__ 的文件夹，并在该文件夹中编写测试文件。

例如，创建一个测试文件 home.test.js：

// src/pages/home/__tests__/home.test.js

import React from 'react';
import { render } from '@testing-library/react';
import Home from '../home';

test('renders welcome message', () => {
  const { getByText } = render(<Home />);
  const welcomeElement = getByText(/Welcome/i);
  expect(welcomeElement).toBeInTheDocument();
});

然后，可以运行以下命令来运行单元测试：

npm run test

端到端测试

在 Umi 项目中进行端到端测试，可以使用 Cypress 等测试工具。你可以创建一个名为 cypress 的文件夹，并在其中编写端到端测试脚本。

例如，创建一个测试文件 home.spec.js：

// cypress/integration/home.spec.js

describe('Home Page', () => {
  it('successfully loads', () => {
    cy.visit('/');
    cy.contains('Welcome');
  });
});

然后，可以运行以下命令来运行端到端测试：

npx cypress open

调试工具

Umi 提供了许多调试工具，帮助开发者调试和分析问题。其中包括 Chrome DevTools、React Developer Tools 等。

在浏览器中使用 Chrome DevTools 可以检查网络请求、分析性能和调试 JavaScript 代码。

另外，React Developer Tools 是一个很有用的工具，可用于检查 React 组件的状态、属性和 UI 结构。

进阶功能和扩展

（讨论 Umi 框架的进阶功能和扩展，如插件开发、自定义 webpack 配置等）

插件开发

通过开发 Umi 插件，可以在项目中实现更复杂的功能和定制化需求。你可以使用 umi-plugin-create 脚手架创建一个插件项目，并编写自己的插件逻辑。

例如，一个简单的插件可以在构建过程中打印输出信息：

// my-plugin.js

export default function(api) {
  api.onStart(() => {
    console.log('Start building...');
  });

  api.onBuildSuccess(() => {
    console.log('Build succeeded!');
  });
}

自定义 webpack 配置

Umi 使用了 webpack 作为底层构建工具。通过 config/config.js 中的 chainWebpack 配置，可以自定义 webpack 配置。

例如，要添加一个自定义的 webpack 插件：

export default {
  chainWebpack(config, { webpack }) {
    config
      .plugin('MyPlugin')
      .use(webpack.MyPlugin, [{ option: 'value' }]);
  },
};