umi 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
umi 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
umi 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
umi 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
umi 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
开发语言 JavaScript TypeScript
操作系统 跨平台
软件类型 开源软件
开源组织 阿里巴巴
地区 国产
提 交 者 红薯
适用人群 未知
收录时间 2019-07-19

软件简介

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
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (9)

加载中
现在前端,框架忒多了,主要是,那些就喜欢封装,封装这个,封装那个,一开始全是bug,那就只能升级,升完级之后,新的框架又出现了,继续踩坑,写框架那些人在就赚够钱,拜拜了
2020/10/20 15:04
回复
举报
以前程序员接一个项目,只要一个兼职的前端做几个通用的UI就可以了,前端UI活少、钱也少。自从有了 reactor、vue、antd,前端UI待遇提高了,兼职的前端变成全职前端了,饭碗也稳了,前端工程师是用实力保住自己的饭碗!
2020/08/14 10:00
回复
举报
插件文档,看的我头皮疼。
2020/07/30 15:47
回复
举报
没人觉得这玩意太重了吗
2019/11/20 10:28
回复
举报
大而全 没有心智负担
2020/01/26 17:13
回复
举报
非常好用,希望大力推广,支持国产,
2019/11/19 15:14
回复
举报
我是看看着图标进来的
2019/09/03 19:15
回复
举报
好用,好评
2019/07/22 08:43
回复
举报
antd pro用的就是这个,简单易用。
2019/07/22 07:56
回复
举报
更多评论
暂无内容
发表于大前端专区
2019/10/10 14:33

Umi UI 二期来了

Umi UI 一期做好了一个架子,但只是包含一些基础功能,而要做提效,则需要一些实打实的功能。一个月后的 Umi UI 二期带来了一些进阶功能,比如资产(区块+模板)、Mini 气泡、编译态同步、build 和 dev 文件分析等。 新功能 资产市场(区块和模板) 支持区块和模板的查看、预览,以及把他们添加到项目甚至指定页面里。我觉得这是可能带来大幅提效的一个功能,当然还得取决于资产的质量和数量,如果现有区块模板和项目需求的匹配...

0
0
发表于大前端专区
2019/09/02 14:12

Hello! Umi UI

Umi UI 这个大坑,今年总算还是踩了。 其实去年还是前年就想做了,但这件事听起来太前沿,和业务关系不大,而且有很大的不确定性,所以优先级始终不高。而今年要在提效上发力,需要有一些可能会带来巨大变化的事情,于是被提上日程。 然后经过一个多月的开发,Umi UI 的第一个版本终于上了。 🌹 🌹 🌹 先看视频介绍。 介绍 UMI UI PRO CODE(写很多代码)和 LOW CODE(写一点点代码)我不确定哪个未来会发展地更好,但就个...

0
0
发表了博客
2018/12/17 19:53

UMI开源项目

本文主要围绕UMI是什么及其特征、安装应用、模板例子等四个方面内容来讲解UMI,希望能够对初学者有所启发。 一、 UMI是什么 UMI是可插拔的企业级反应应用程序框架。 二、 特征 特征 📦 开箱即用,内置支持反应,反应路由器等。 🏈 Next.js喜欢和全功能的路由约定,它也支持配置的路由 🎉 完整的插件系统,涵盖从源代码到生产的每个生命周期 🚀 高性能,通过插件支持PWA,路由级代码拆分等 💈 支持静态导出,适应各种环...

0
0
发表于大前端专区
2019/03/12 08:51

UMI的目录约定

UMI的目录约定如下:(从官网上复制下来的) . ├── dist/ // 默认的 build 输出目录 ├── mock/ // mock 文件所在目录,基于 express ├── config/ ├── config.js // umi 配置,同 .umirc.js,二选一 └── src/ // 源码目录,可选 ├── layouts/index.js // 全局布局 ├── pages/ ...

0
0
发表了博客
2019/03/30 01:40

【前端开发测试】umi 的 mock 功能

umi 里约定 mock 文件夹下的文件即 mock 文件,文件导出接口定义,支持基于 require 动态分析的实时刷新,支持 ES6 语法,以及友好的出错提示,详情参看 umijs.org。 export default { // 支持值为 Object 和 Array 'GET /api/users': { users: [1, 2] }, // GET POST 可省略 '/api/users/1': { id: 1 }, // 支持自定义函数,API 参考 express@4 'POST /api/users/create': (req, res) => { res.end('OK...

0
0
发表了博客
2019/09/29 10:54

umi model 注册

model 分两类,一是全局 model,二是页面 model。全局 model 存于 /src/models/ 目录,所有页面都可引用;页面 model 不能被其他页面所引用。 规则如下: src/models/**/*.js 为 global model src/pages/**/models/**/*.js 为 page model global model 全量载入,page model 在 production 时按需载入,在 development 时全量载入 page model 为 page js 所在路径下 models/**/*.js 的文件 page model 会向上查找,比如 page j...

0
0
2020/06/29 11:05

umi打包相关记录

1、umi的组成与作用 umi的定位既是一个打包构建发布的框架,也是拥有路由管理相关能力的框架,这些能力的拥有得益于它内外集成了50+个插件,让它的功能具有多样性,从打包到支持路由级的按需加载和code splitting,“无所不能”这几个字在这个集成框架里使用也不为过, 下面是umi打包源码到发布的流程。 umi 首先会加载用户的配置和插件,然后基于配置或者目录,生成一份路由配置,再基于此路由配置,把 JS/CSS 源码和 HTML 完整...

0
0
发表于大前端专区
2020/01/21 12:02

umi中的connect用法

Umi 首先介绍一下umi,一个将dva React Redux 包装起来的框架(不对的话欢迎大家指教) umi中的connect的用法 简单来说connect是用来连接前端的ui界面和和前端model的一个嫁接桥梁 ,通过使用connect将model里面定义的state,和dispatch,和histoey方法等传递到前端供前端使用 使用connect连接有三种方式 方式一 import React from "react"; import {Component} from 'react'; import { connect } from "dva"; //从dva中导入c...

0
1
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
9 评论
265 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部