使用 umi 3 创建子应用并接入主应用

blueju 等级 481 0 0

使用 umi 3 创建子应用并接入主应用

前言:
umi 3 更新频繁,文档不完善,时效性不定,因此前提条件很重要,今天是2020年8月21日。

创建子应用使用的脚手架是:umi 3
创建主应用使用的脚手架是:um 2,但是本篇文章暂时不介绍创建主应用的过程及在主应用中的配置过程。

1. 创建 umi 3 工程

命令行

yarn create @umijs/umi-app

2. 安装 umi 3 的 qiankun 插件

创建的 umi 3 并不包含 qiankun 插件,需要自己安装。

yarn add @umijs/plugin-qiankun -D

3. 添加 package.json 的 name

在 package.json 中添加属性 name,name值为你的项目名,请自定义。

4. 在子应用中配置

参考:https://umijs.org/zh-CN/plugins/plugin-qiankun#第一步:插件注册(configjs)

4.1 插件注册

对于 umi 3,需要在子应用的配置( .umirc.ts )中,添加下面这部分代码:

qiankun: {
  slave: {}
}

添加后效果如下:
使用 umi 3 创建子应用并接入主应用

4.2 配置运行时生命周期钩子(可选)

如果需要在子应用的生命周期期间加一些自定义逻辑,可以在子应用的 src/app.ts 里导出 qiankun 对象,并实现每一个生命周期钩子,其中钩子函数的入参 props 由主应用自动注入。

需要注意的是,在由 umi 3 脚手架创建的工程中,src 目录下并没有 app.ts 文件,这需要自己创建,并将如下代码 copy and paste。

export const qiankun = {
  // 应用加载之前
  async bootstrap(props) {
    console.log('app1 bootstrap', props);
  },
  // 应用 render 之前触发
  async mount(props) {
    console.log('app1 mount', props);
  },
  // 应用卸载之后触发
  async unmount(props) {
    console.log('app1 unmount', props);
  },
};


至此,这一阶段的工作已经完成,虽然如果没有对 umi 的整体了解下去看本篇文章会云里雾里,但还是希望能给在此部分有所困惑而停滞的同学提供帮助。

收藏
评论区

相关推荐

《前端实战总结》之使用解释器模式实现获取元素Xpath路径的算法
前端领域里基于javascript的设计模式和算法有很多,在很多复杂应用中也扮演着很重要的角色,接下来就介绍一下javascript设计模式中的解释器模式,并用它来实现一个获取元素Xpath路径的算法。 上期回顾 《前端实战总结》之迭代器模式的N1种应用场景(https://juejin.im/post/6844904008616771591)
ES2020 骚操作:可选链 "?."
可选链 "?." 可选链 ?. 是一种访问嵌套对象属性的安全的方式。即使中间的属性不存在,也不会出现错误。 “不存在的属性”的问题 如果你才刚开始读此教程并学习 JavaScript,那可能还没接触到这个问题,但它却相当常见。 举个例子,假设我们有很多个 user 对象,其中存储了我们的用户数据。 我们大多
JavaScript实现H5接金币功能
今日做出做出一个春节接金币红包的活动,感觉挺不错的分享给大家 这个小游戏采用hilojs实现的,详情(https://hiloteam.github.io/Hilo/docs/apizh/index.html) 第一步:安装插件 npm i hilojs或者yarn add hilojs 第二步:创建一个Asset.js文件 language i
面试官在“逗”你系列:连续子数组的最大和或最小和
前言 本文题目是“连续子数组的最大和或最小和”。 话不多说,开始“打怪”修炼... 一、理解题目 以“连续子数组的最大和”为例,相当于我们在数组中,计算连续的子数组的和,找寻最大值。如在数组3, 2, 1, 2, 4, 6, 5中连续子数组的最大和为:3 (2) 1 2 4 8 输入:3, 2, 1, 2, 4, 6,
图文并茂讲清楚 JavaScript 内存管理
作为一个 JavaScript 的开发者,大多数情况下你可能不会担心内存管理问题,因为 JavaScript 引擎会帮你处理这些。但是在开发过程中,你或多或少的会遇到一些相关的问题,比如内存泄漏等,只有了解了内存分配的工作机制,你才会知道如何去解决这些问题。 在这篇文章中,我将会向你介绍 内存分配 和 垃圾收集 的机制,以及如何避免一些 常见的内存泄漏 的
HTTP面试题精选_langsiming的博客
1. 简述下TCP三次握手的过程,并解释采用3次握手建立连接的原因? 1. 客户端发送建立连接请求,携带信息syn 1,seq X 第一次握手 2.
搭建 umi + qiankun + antd 的微前端平台
<a name"f5444d4a"</a 关键词: umi qiankun ant design pro 非动态注册子应用 非动态装载子应用(路由)<a name"Lxdp4"</a 背景银行项目,需要一个前端中台,承载各项目组开发的应用,本篇文章是在工作实践后所写,还是具有一定可借鉴性的,至于官网已经有相关内容还专门写这么一篇,还
umi + qiankun 动态注册子应用解决方案
前言 首发于 <br /本篇文章可以被视为上一篇文章()的延续,上一篇文章大致讲述了搭建一个简易微前端平台的过程,其中关于子应用注册的配置是通过硬编码的方式,在构建打包前写入的。<br /<br /但是真实项目中,更需要的是动态注册子应用,比如说我正参与的这个项目。<br /<br /本篇文章的示例代码是基于上一篇文章示例代码改动的,上一篇文
umi +qiankun 主应用动态装载子应用(路由)解决方案
<a name"p1boA"</a 前言接上一篇(),上一篇中使用的都是运行时动态注册子应用,子应用路由仍然是写死的、非动态获取。<br /<br /然后真实项目中除了需要动态注册子应用,还很有可能需要动态装载子应用(路由),比如说:不同权限的用户需要给予他们不同的路由。<br /<br /此篇 blog 的代码是基于上一篇进行改动的,上一篇
使用 umi 3 创建子应用并接入主应用
使用 umi 3 创建子应用并接入主应用前言:<br /umi 3 更新频繁,文档不完善,时效性不定,因此前提条件很重要,今天是2020年8月21日。<br /<br /创建子应用使用的脚手架是:umi 3<br /创建主应用使用的脚手架是:um 2,但是本篇文章暂时不介绍创建主应用的过程及在主应用中的配置过程。<br /<a name"Yd
js-Answers一
JavaScript的组成 JavaScript 由以下三部分组成: 1. ECMAScript(核心):JavaScript 语言基础 2. DOM(文档对象模型):规定了访问HTML和XML的接口 3. BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法 JS的基本数据类型和引用数据类型
React 灵魂 23 问,你能答对几个?
1、setState 是异步还是同步? 1. 合成事件中是异步 2. 钩子函数中的是异步 3. 原生事件中是同步 4. setTimeout中是同步 相关链接:你真的理解setState吗?: 2、聊聊 react@16.4 的生命周期相关连接:React 生命周期 我对 React v16.4 生命周期的
前端面试题集锦(奥利给!!!)
基础知识点与高频考题 JavaScript基础console.log(1 < 2 < 3); console.log(3  2  1); // 写出代码执行结果,并解释为什么 // 答案与解析 true false 对于运算符、<,一般的计算从左向右 第一个题:1 < 2 等于 true, 然后true < 3,true  1 ,因此结果是t
盘点3个可以操作JavaScript的Python库
前言我们都知道Python可以很轻松的实现某些功能,而且还可以编写网页,比如Remi,Pysimplegui,但是操作JavaScript这种浏览器的脚本语言,还是第一次听说,小编也是第一次听说,于是就跟大家脑补这一知识。 一、PyExecJS是一个可以执行JavaScript脚本的Python模块,可以与网页上的JavaScript进行交互,这样就能更加
python 赋值引用 浅拷贝 深拷贝
一、基础概念1、直接赋值:其实就是对象的引用(别名)。2、浅拷贝(copy):拷贝父对象,不会拷贝对象的内部的子对象。3、深拷贝(deepcopy): copy 模块的 deepcopy 方法,完全拷贝了父对象及其子对象。二、代码示例import copya [1, 2, 3, 4, ['a', 'b']] 原始对象 b a