百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

阿里开源可插拔的企业级React应用框架——UmiJS

ccwgpt 2024-10-04 13:59 38 浏览 0 评论

介绍

UmiJS(五米)是阿里开源的可插拔企业级React应用框架,为什么说是可插拔,是因为它的整个生命周期都是插件化的其内部也有很多都是通过插件来实现的。其中大家熟知的Ant Design pro就是基于umi构建的。

官方文档

中文文档:https://umijs.org/zh/

Github:https://github.com/umijs/umi

特性简介

Umi的特性详细的可看官网文档,以下归纳来源于官网文档:

  • 插件化

整个生命周期的插件化

  • 开箱即用

我们只需要以来一个umi就可以完成项目的启动,很多配置像react、preact、webpack、react-router、babel、jest都无需安装

  • 约定式路由

类next.js的路由,无需复杂的路由配置,支持权限、动态、嵌套等路由

  • 性能优秀

插件化支持PWA,以路由为单元的 code splitting 等

  • 静态页面导出

umi支持静态页面导出,用于无服务器端环境

  • 最低支持IE9

可以兼容到到最低IE9,通过umi中的targets 配置实现js和css的补丁

  • 支持Typescript

包含 umi API 的 d.ts 定义,测试方案,组件打包方案等

  • 深入集成 dva 数据流方案,但不耦合

支持 duck directory、约定式的 model 挂载、model 的 动态加载等

  • 支持多页应用

基于 umi-plugin-mpa

快速入门

  • 安装
yarn global add umi 

或者

npm install -g umi

我在本地测试用的yarn,但是遇到了一个小坑,虽然显示安装成功,但是再执行umi -v查看版本号时发现,umi命令不存在,因此需要注意的是,你需要手动将umi的路径添加到系统的环境变量,我本地是win7,linux也是如此,以下是查看路径的方法

 yarn global bin //查看umi的路径

将路径添加到环境变量即可

  • 新建页面

你首先到某个文件夹下新建一个你的项目文件夹,或者

mkdir myapp && cd myapp //创建目录并进入,然后执行下面的命令新建页面
umi generate page index
  • 本地开发
umi dev
  • 构建上线
umi build

官网提供了十分详细的文档教程,还没体验过的小伙伴可以去尝试下啦

使用了umi的项目

  • antd Admin

https://github.com/zuiidea/antd-admin

  • antd Design pro

https://github.com/ant-design/ant-design-pro

总结

umi是阿里开源的非常易用的企业级React应用框架,由于umi集成了大量的插件,像dva.js数据流框架,你再也不需要为复杂的react全家桶所困扰了,用过dva的小伙伴都知道它的好用之处,在umi中你可以选择性的使用它。说再多也没用,不如自己去体验一下吧。

相关推荐

火电厂智能管控新基建:全场景人员定位系统架构解析

在能源生产领域,火电厂以庞大的厂区规模、复杂的作业环境和密集的人机交互著称。从高温高压的锅炉房到精密复杂的电气设备间,从露天煤场到灰渣处理区,传统管理模式下的人员定位盲区,正成为制约安全生产与高效运营...

安全仪表系统(SIS)全生命周期管理:从设计到运维的深度解析

以下是一篇关于安全仪表系统(SIS)的技术解析与实践方法,涵盖系统架构、设计标准、实施流程及行业应用。安全仪表系统(SIS)是工业过程安全的最后一道防线,通过独立于基础控制系统的硬件和逻辑,在工艺失控...

数字化转型架构下的数据安全治理方案

这份PPT文件内容围绕数字化转型架构下的数据安全治理方案展开,主要探讨了数据质量治理、安全治理、全生命周期治理以及治理考核等方面的内容。更多参考及文档获取详见公众号:优享智库数据治理概述定义与目标:数...

安全完整性等级(SIL)分析报告编制与认证实践方法

以下是一篇关于安全完整性等级(SIL)分析报告的文章,涵盖SIL定级方法、验证流程、计算模型及工程实践。安全完整性等级(SIL)是量化安全仪表系统(SIS)性能的核心指标,由IEC61508/615...

项目管理体系框架(项目的管理体系)

Pokemon go下载教程 口袋妖怪Go下载解锁方法

#p#安卓下载#e#Pokemongo怎么下载?口袋妖怪go下载教程讲解。虽然锁区了但是大家还是有办法的,首先是口袋妖怪Go下载问题,很多口袋妖怪go的安卓玩家不知道怎么下载游戏,小编给大家详细解答...

抛弃Windows吧!谷歌推免费Chrome系统,一个U盘就搞定

在目前的个人电脑上,最主流的系统当然是Windows,不过除了Windows之外,我们也可以选择购买苹果的电脑,使用苹果的MacOS系统。不过除了苹果和微软的系统之外,实际上谷歌也有自己用于个人电脑...

谷歌误发ARM版Chrome安装包,致英特尔 /AMD用户无法安装

IT之家3月26日消息,科技媒体WindowsLatest昨日(3月25日)发布博文,报道称由于谷歌误发适用于ARM架构的安装包,导致用户从谷歌官网下载的ChromeSetu...

【Google Gemini极简教程】使用Flask和Gemini API构建一个AI BaaS

BaaS(BackendasaService,后端即服务)BaaS是一种云服务模型,它为开发者提供了一种便捷的方式来构建和管理应用程序的后端服务。BaaS提供了一系列的后端功能,如数据库管理...

第一资讯Windows 10 Mobile已成功安装谷歌Play Store

虽然微软并未正式推出WP可安装APK的功能,但近期有不少玩机爱好者已经在Windows10Mobile平台上用上了Android应用,而且随后还在需要谷歌服务框架(GoogleServices)...

宝可梦TCG Pocket谷歌账号登录,给你提供指南

《宝可梦TCGPocket》作为一款备受欢迎的卡牌对战游戏,为了给玩家提供更加便捷和安全的登录方式,支持使用谷歌账号进行登录。通过谷歌账号登录,您不仅可以快速进入游戏,还能享受账号数据同步、跨设备游...

秒变万能家庭服务器!斐讯N1 armbian安装指南

一直以来,我都想配置一台小型服务器放在家里玩一玩,但是x86架构的主机体积大功耗高,价格也不低。而树莓派的话,价格便宜一点,性能对于轻度使用也基本够用。可是树莓派仍然要两三百块钱,感觉还是有点贵。于是...

如何自己开发一个Google浏览器插件?

相信很多人都好奇,谷歌浏览器那么多的插件是如何开发的,我们如何开发一个自定义的Google浏览器插件,下面我们就来详细的给出一个开发Google浏览器插件的流程。准备环境首先需要有一个文本编辑器工具如...

我的世界手机版谷歌商店安装教程(我的世界谷歌下载)

在我的世界手机版升级到0.11.0版本后,很多玩家发现正式版需要有谷歌商店的验证也就是必须安装Googleplay才能玩。这次搞趣网小编就为大家带来我的世界手机版谷歌商店安装教程。有些手机自带Goo...

部落冲突安卓版谷歌怎么绑定 有无root都可以

部落冲突安卓版谷歌怎么绑定?下面小编为大家带来部落冲突安卓版谷歌绑定攻略详解,希望这篇攻略详解能够对大家有所帮助。首先准备这些东西(必须在网上自己下载,不要相信google应用)还需要下载"谷歌服务框...

取消回复欢迎 发表评论: