微前端qiankun示例 Umi3.5

2023-12-02 19:01

本文主要是介绍微前端qiankun示例 Umi3.5,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

主应用配置(基座)

  1. 安装包
    npm i @umijs/plugin-qiankun -D
    配置 qiankun 开启
{"private": true,"scripts": {"start": "umi dev","build": "umi build","postinstall": "umi generate tmp","prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'","test": "umi-test","test:coverage": "umi-test --coverage"},"gitHooks": {"pre-commit": "lint-staged"},"lint-staged": {"*.{js,jsx,less,md,json}": ["prettier --write"],"*.ts?(x)": ["prettier --parser=typescript --write"]},"dependencies": {"@ant-design/pro-layout": "^6.5.0","react": "17.x","react-dom": "17.x","umi": "^3.5.41"},"devDependencies": {"@types/react": "^17.0.0","@types/react-dom": "^17.0.0","@umijs/plugin-qiankun": "^2.43.3","@umijs/preset-react": "1.x","@umijs/test": "^3.5.41","lint-staged": "^10.0.7","prettier": "^2.2.0","typescript": "^4.1.2","yorkie": "^2.0.0"}
}
  1. 注册子应用
    插件构建期配置子应用
export default {qiankun: {master: {// 注册子应用信息apps: [{name: 'app1', // 唯一 identry: '//localhost:7001', // html entry},{name: 'app2', // 唯一 identry: '//localhost:7002', // html entry},],},},
};
  1. 装载子应用
    使用路由绑定的方式
export default {routes: [{path: '/',component: '../layouts/index.js',routes: [{path: '/app1',component: './app1/index.js',routes: [{path: '/app1/user',component: './app1/user/index.js',},
+            // 配置微应用 app1 关联的路由
+            {
+              path: '/app1/project',
+              microApp: 'app1',
+            },],},
+       // 配置 app2 关联的路由
+       {
+         path: '/app2',
+         microApp: 'app2'
+       },{path: '/',component: './index.js',},],},],
}
  1. 主应用.umirc.ts整体配置:
import { defineConfig } from 'umi';export default defineConfig({nodeModulesTransform: {type: 'none',},routes: [{ path: '/', redirect: '/micro' },{path: '/micro',component: '@/pages/index',routes: [{path: '/micro/app1',microApp: 'app1',},],},{path: '/home',component: '@/pages/Home',},],fastRefresh: {},qiankun: {master: {// 注册子应用信息apps: [{name: 'app1', // 唯一 identry: '//localhost:8002/micro/*', // html entry},],},},
});

子应用配置

  1. 安装包
    npm i @umijs/plugin-qiankun -D
    配置 qiankun 开启
  2. 插件注册(config.js)
export default {qiankun: {slave: {},},
};
  1. 配置运行时生命周期钩子(可选)
    插件会自动为你创建好 qiankun 子应用需要的生命周期钩子,但是如果你想在生命周期期间加一些自定义逻辑,可以在子应用的 src/app.ts 里导出 qiankun 对象,并实现每一个生命周期钩子,其中钩子函数的入参 props 由主应用自动注入。
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);},
};

这篇关于微前端qiankun示例 Umi3.5的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/446446

相关文章

pandas中位数填充空值的实现示例

《pandas中位数填充空值的实现示例》中位数填充是一种简单而有效的方法,用于填充数据集中缺失的值,本文就来介绍一下pandas中位数填充空值的实现,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是中位数填充?为什么选择中位数填充?示例数据结果分析完整代码总结在数据分析和机器学习过程中,处理缺失数

Pandas统计每行数据中的空值的方法示例

《Pandas统计每行数据中的空值的方法示例》处理缺失数据(NaN值)是一个非常常见的问题,本文主要介绍了Pandas统计每行数据中的空值的方法示例,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是空值?为什么要统计空值?准备工作创建示例数据统计每行空值数量进一步分析www.chinasem.cn处

利用Python调试串口的示例代码

《利用Python调试串口的示例代码》在嵌入式开发、物联网设备调试过程中,串口通信是最基础的调试手段本文将带你用Python+ttkbootstrap打造一款高颜值、多功能的串口调试助手,需要的可以了... 目录概述:为什么需要专业的串口调试工具项目架构设计1.1 技术栈选型1.2 关键类说明1.3 线程模

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

Mysql用户授权(GRANT)语法及示例解读

《Mysql用户授权(GRANT)语法及示例解读》:本文主要介绍Mysql用户授权(GRANT)语法及示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql用户授权(GRANT)语法授予用户权限语法GRANT语句中的<权限类型>的使用WITH GRANT

Java中Scanner的用法示例小结

《Java中Scanner的用法示例小结》有时候我们在编写代码的时候可能会使用输入和输出,那Java也有自己的输入和输出,今天我们来探究一下,对JavaScanner用法相关知识感兴趣的朋友一起看看吧... 目录前言一 输出二 输入Scanner的使用多组输入三 综合练习:猜数字游戏猜数字前言有时候我们在

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab