当前位置：首页 > 软件库 > 手机/移动开发 > React 开源项目 >

umi

可插拔的企业级 React 应用框架

授权协议 MIT

开发语言 JavaScript TypeScript

所属分类手机/移动开发、 React 开源项目

软件类型开源软件

地区国产

投递者谭毅然

操作系统跨平台

开源组织阿里巴巴

适用人群未知

软件概览

umi 是一个可插拔的企业级 react 应用框架。

插件化

umi 的整个生命周期都是插件化的，甚至其内部实现就是由大量插件组成，比如 pwa、按需加载、一键切换 preact、一键兼容 ie9 等等，都是由插件实现。

开箱即用

你只需一个 umi 依赖就可启动开发，无需安装 react、preact、webpack、react-router、babel、jest 等等。

约定式路由

类 next.js 的约定式路由，无需再维护一份冗余的路由配置，支持权限、动态路由、嵌套路由等等。

主要特性：

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

快速开始：

# Install deps
$ yarn global add umi # or npm install -g umi

# Create application
$ mkdir myapp && cd myapp

# Create page
$ umi generate page index

# Start dev server
$ umi dev

# Build and deploy
$ umi build

使用案例

Umi框架

Umi框架一、简介 Umi 是蚂蚁金服的底层前端框架，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。二、特点可扩展： Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成。此外还支持插件和插件集，
【umi】umi初探

前言某次听公开课看别人用这玩意，感觉很nb，稍微学一下。 umijs 是一个类似next.js的react框架，约定pages 目录下的文件即路由，而文件则导出 react 组件。官网仓库官网文档中文可发音为乌米，不过图标为啥是个白米饭。。安装运行先不用cli构建，安装全局命令umi cnpm install -g umi 使用umi g page index可以生成index页面。
四、umi配置

这里主要是umi和webpack系列的配置。这些都是在config/config.js里面配置的一、基本配置 (1)plugins: 配置插件列表类型Array, 默认值[] 介绍：数组项为指向插件的路径，可以是 npm 依赖、相对路径或绝对路径。如果是相对路径，则会从项目根目录开始找。如果插件有参数，则通过数组的形式进行配置，第一项是路径，第二项是参数 export default {
umi中使用页签

umi-plugin-panel-tabs使用该插件可以在页面中自动生成页签。下载方法：npm i umi-plugin-panel-tabs 使用方法在配置项中加入 export default defineConfig({ panelTab: { use404: true, useAuth: true, autoI18n: true, tabsLimit:
浅谈umi router

前言最近学习UmiJS，在umi-router上踩了许多坑，现记录下所学。基础路由假设 pages 目录结构如下： + pages/ + users/ - index.js - list.js - index.js 那么，umi 会自动生成路由配置如下： [ { path: '/', component: './pages/index.js' }, { p
umi使用mock

// 引入 Mock import { Request, Response } from '@umijs/deps/compiled/express' import Mock from 'mockjs' // 定义数据类型 export default { 'GET /api/tags': (req: Request, res: Response) => { res.send(
【Umi】history (API)

history (API) 可用于获取当前路由信息 import { history } from 'umi'; // history 栈的实体个数 console.log(history.length); // 当前 history 跳转的action, 有push/replace/pop 三种类型 console.log(history.action) // location 对象，包含
umi_tools使用

首先保存两个网址： umi_tools github网址：https://github.com/CGATOxford/UMI-tools umi_tools 官方网址：https://umi-tools.readthedocs.io/en/latest/ 1. 提取UMI信息到readname umi_tools extract --bc-pattern=NNNNNNN --bc-pattern2
Umi配置文件

按照官网项目默认使用的是.umirc.ts，如果想要使用自己的配置，那么在根目录创建config/config.ts，并且删除.umirc.ts，不然还会读取.umirc.ts。
Umi框架简介

参考： https://www.jianshu.com/p/7d5ba07fe1fd
Umi

1 项目目录官方文档 -> https://umijs.org/zh-CN ### 项目目录结构 (没有的就自己创建) ------------------------------------------------------------------------------ ├── config # umi 配置，包含路由，构建等配置 +++ ├──
umi路由鉴权

配置式路由 umi 的权限路由是通过配置路由的 Routes 属性来实现。约定式的通过 yaml 注释添加，配置式的直接配上即可。比如有以下配置： routes.js文件: module.exports = [ { path: '/application', component: './application/application', Routes: ['./privateRoute.js

umi

插件化

开箱即用

约定式路由

同类工具

相关阅读

相关文章

相关问答

相关文档