React 第十二章 UmiJs

Umi.js 介绍

Umi 是由蚂蚁集团推出的可扩展的企业级前端应用框架。Umi 以路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展。然后配以生命周期完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。

image-20221105145301148

Umi.js 特点

  1. 插件化:UmiJS 的整个生命周期都是插件化的,这意味着框架内部的功能大多由插件实现。这种设计使得框架非常灵活,开发者可以通过引入不同的插件来扩展或修改框架的行为。例如,按需加载、一键切换 Preact、一键兼容 IE9 等功能,都是由插件实现的。
    开箱即用:UmiJS 内置了路由、构建、部署等功能,开发者仅需一个依赖即可开始开发。这大大简化了开发流程,无需额外安装 React、Preact、Webpack、React-Router、Babel、Jest 等工具或库。
  2. 约定式路由:UmiJS 采用了约定式路由,这意味着开发者无需再维护一份冗余的路由配置。框架会根据文件目录结构自动生成路由配置,并支持权限、动态路由、嵌套路由等功能。这种设计不仅简化了路由管理,还提高了开发效率。
  3. 可扩展性:UmiJS 支持插件和插件集,这使得框架能够支持各种不同的功能需求。无论是添加新的功能、修改现有功能,还是优化性能,都可以通过引入或开发插件来实现。
  4. 业务整合:由于 UmiJS 是阿里系的前端框架,它对自家的 Ant Design、ahooks、dva 等工具或库的整合度非常高。这使得开发者在使用这些工具或库时,能够获得更好的兼容性和性能。

约定式路由

约定式路由并不是 Umi 独有的东西,像基于 VueNuxt.js,基于 ReactNext.js 框架,都提供了约定式路由的方式。

而早期在 Umi 2.x 时代,团队借鉴了这种方式,加入了约定式路由的功能,并沿用至今。

所谓约定式路由,简单来讲,就是根据你的页面级组件自动生成路由的配置,而不再需要我们自己去书写路由配置。

有关约定式路由的说明,在 v4 的文档中介绍相对比较简单:https://umijs.org/docs/guides/directory-structure#pagesv4 更多的是介绍配置式路由。

如果想要了解约定式路由,这里可以参阅 v2v3 的文档:

  • v2 文档:https://v2.umijs.org/zh/guide/router.html

  • v3 文档:https://v3.umijs.org/zh-CN/docs/convention-routing

注意
不同版本之间会有略微的差异,例如动态路由在 v2v3 中的使用方式就有所区别,当发现差异时,应该查询自己对应版本的文档说明

插件机制

Umi 中,采用了插件的机制,所涵盖的其他技术都以插件的形式引入。

要开启某个插件,我们可以在 .umirc.js 中进行配置,例如:

export default defineConfig({antd: {},access: {},model: {},initialState: {},request: {},layout: {},dva: {},npmClient: 'npm',
});

另外,如果*.umiirc.js* 文件配置的内容很多的话,可以单独提取出来,放入到 config/config.js 里面(二选一,.umirc.js 优先)

构建时配置和运行时配置

v2 版本开始,Umi 就一直包含两个配置文件,到了 v4 也一直保持这一特点。

构建时配置

Umi 中,约定项目根目录下的 .umirc.js/ts 为构建时配置,当我们启动 Umi 项目时,Umi 会对整个项目进行一次构建,在 src 目录下生成一个 .umi 的临时目录,构建时配置则决定了所生成的 .umi 目录的样子。

.umi 目录的结构如下:

+ .umi+ core     # 内部插件生成+ pluginA  # 外部插件生成+ presetB  # 外部插件生成+ umi.ts   # 入口文件

因此,在构建时配置中,一个很重要的用途就是开启插件。

有关 .umirc.js/ts 具体的配置项,请参阅:https://umijs.org/docs/api/config

运行时配置

运行时配置和配置的区别是他跑在浏览器端,基于此,我们可以在这里写函数、tsximport 浏览器端依赖等等,注意不要引入 node 依赖。

umi 中,约定 src 目录下的 app.js/ts/jsx/tsx 为运行时的配置文件。

有关运行时配置项目,可以参阅:https://umijs.org/docs/api/runtime-config

总结

UmiJS 是一个强大且灵活的企业级前端应用框架,基于 React 和插件化的思想构建。它提供了丰富的功能和插件生态系统,使得开发者能够高效地构建出稳定、可扩展的 Web 应用。

无论是初创公司还是大型企业,都可以通过 UmiJS 来提高开发效率、降低维护成本,并构建出高质量、可扩展的 Web 应用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/831040.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OpenGL 入门(一)—— OpenGL 基础

1、OpenGL 基础知识 1.1 OpenGL 简介 OpenGL(Open Graphics Library)是图形领域的工业标准,是一套跨编程语言、跨平台、专业的图形编程(软件)接口。它用于二维、三维图像,是一个功能强大,调用…

PySpark学习---销售情况数据统计分析案例

需求分析: 某公司是做零售相关业务,旗下出品各类收银机. 目前公司的收银机已经在全国铺开,在各个省份均有店铺使用.机器是联网的,每一次使用都会将售卖商品数据上传到公司后台.老板现在想对省份维度的销售情况进行统计分析 逻辑需求: 1.各省销…

数据结构与算法实验题五道 A一元多项式的求导 B还原二叉树 C 六度空间 D 基于词频的文件相似度 E 模拟excel排序

A (1) 输入格式说明: 以指数递降方式输入多项式非零项系数和指数(绝对值均为不超过1000的整数)。数字间以空格分隔。 (2) 输出格式说明: 以与输入相同的格式输出导数多项式非零项的系数和指数。数字间以空格分隔,但…

第八篇:隔离即力量:Python虚拟环境的终极指南

隔离即力量:Python虚拟环境的终极指南 1 引言 在编程的多元宇宙中,Python语言犹如一颗闪耀的星辰,其魅力不仅仅在于简洁的语法,更在于其庞大而繁荣的生态系统。然而,随着应用的增长和复杂性的提升,开发者们…

ChatGPT 记忆功能上线 能记住你和GPT互动的所有内容

你和ChatGPT的互动从今天开始变得更加智能!ChatGPT现在可以记住你的偏好和对话细节,为你提供更加相关的回应。和它聊天,你可以教它记住新的东西,例如:“记住我是素食主义者,当你推荐食谱时。”想了解ChatGP…

【15】Head First Java 学习笔记

HeadFirst Java 本人有C语言基础,通过阅读Java廖雪峰网站,简单速成了java,但对其中一些入门概念有所疏漏,阅读本书以弥补。 第一章 Java入门 第二章 面向对象 第三章 变量 第四章 方法操作实例变量 第五章 程序实战 第六章 Java…

Java基于微信小程序+uniapp的校园失物招领小程序(V3.0)

博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…

微软如何打造数字零售力航母系列科普06 - 如何使用微软的Copilot人工智能

如何使用微软的Copilot人工智能? Copilot和ChatGPT有很多相似之处,但微软的聊天机器人本身就有一定的优势。以下是如何对其进行旋转,并查看其最引人注目的功能。 ​​​​​​​ (资料来源:Lance Whitney/微软&…

NLP 笔记:TF-IDF

TF-IDF(Term Frequency-Inverse Document Frequency,词频-逆文档频率)是一种用于信息检索和文本挖掘的统计方法,用来评估一个词在一组文档中的重要性。TF-IDF的基本思想是,如果某个词在一篇文档中出现频率高&#xff0…

使用c++类模板和迭代器进行List模拟实现

List 一、创建节点结构二、创建迭代器类1、类的结构2、一系列的运算符重载 三、创建list1、细节把握2、迭代器函数3、构造函数和析构函数4、增删查改的成员函数 一、创建节点结构 template <class T>//节点结构 struct ListNode {ListNode<T>* _next;ListNode<…

Springboot+vue+小程序+基于微信小程序的在线学习平台

一、项目介绍    基于Spring BootVue小程序的在线学习平台从实际情况出发&#xff0c;结合当前年轻人的学习环境喜好来开发。基于Spring BootVue小程序的在线学习平台在语言上使用Java语言进行开发&#xff0c;在数据库存储方面使用的MySQL数据库&#xff0c;开发工具是IDEA。…

APScheduler定时器使用:django中使用apscheduler,使用mysql做存储后端

一、基本环境 python版本&#xff1a;3.8.5 APScheduler3.10.4 Django3.2.7 djangorestframework3.15.1 SQLAlchemy2.0.29 PyMySQL1.1.0二、django基本设置 2.1、新增一个app 该app用来写apscheduler相关的代码 python manage.py startapp gs_scheduler 2.2、修改配置文件s…

Ollamallama

Olllama 直接下载ollama程序&#xff0c;安装后可在cmd里直接运行大模型&#xff1b; llama 3 meta 开源的最新llama大模型&#xff1b; 下载运行 1 ollama ollama run llama3 2 github 下载仓库&#xff0c;需要linux环境&#xff0c;windows可使用wsl&#xff1b; 接…

C++浮点数format时的舍入问题

C浮点数format时的舍入问题 首先有这样一段代码&#xff1a; #include <iostream> #include <stdio.h> using namespace std;int main() {cout << " main begin : " << endl;printf("%.0f \r\n", 1.5);printf("%.0f \r\n&…

吴恩达2022机器学习专项课程(一)8.2 解决过拟合

目录 解决过拟合&#xff08;一&#xff09;&#xff1a;增加数据解决过拟合&#xff08;二&#xff09;&#xff1a;减少特征特征选择缺点 解决过拟合&#xff08;三&#xff09;&#xff1a;正则化总结 解决过拟合&#xff08;一&#xff09;&#xff1a;增加数据 收集更多训…

【c++】模板编程解密:C++中的特化、实例化和分离编译

&#x1f525;个人主页&#xff1a;Quitecoder &#x1f525;专栏&#xff1a;c笔记仓 朋友们大家好&#xff0c;本篇文章我们来学习模版的进阶部分 目录 1.非类型模版参数按需实例化 2.模版的特化函数模版特化函数模版的特化类模版全特化偏特化 3.分离编译模版分离编译 1.非类…

综合性练习(后端代码练习4)——图书管理系统

目录 一、准备工作 二、约定前后端交互接口 1、需求分析 2、接口定义 &#xff08;1&#xff09;登录接口 &#xff08;2&#xff09;图书列表接口 三、服务器代码 &#xff08;1&#xff09;创建一个UserController类&#xff0c;实现登录验证接口 &#xff…

网络应用层之(6)L2TP协议详解

网络应用层之(6)L2TP协议 Author: Once Day Date: 2024年5月1日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文档可参考专栏&#xff1a;通信网络技术_Once-Day的…

Apollo Dreamview+之播放离线数据包

前提条件 完成 Dreamview 插件安装&#xff0c;参见 Studio 插件安装 。 操作步骤 您可以通过包管理和源码两种方式快速体验离线数据包播放操作。其中进入 docker 环境和启动 dreamview 的命令有所区别&#xff0c;请您按照命令进行操作。 步骤一&#xff1a;启动并打开 Dr…

C++学习第十四课:运算符类型与运算符重载

C学习第十四课&#xff1a;运算符类型与运算符重载 在C中&#xff0c;运算符重载是一种使得自定义类型&#xff08;如类对象&#xff09;能够使用C内建运算符的能力。运算符重载允许程序员定义运算符对用户定义类型的特殊行为&#xff0c;这增加了程序的可读性和自然表达能力。…