省博物馆网站建设/注册城乡规划师
1、安装qiankun
npm install qiankun --save
2、主应用中注册和配置qiankun
- 在主应用的入口文件main.ts中,引入qiankun的注册方法:
import { registerMicroApps, start } from 'qiankun';
- 创建一个数组,用于配置子应用的相关信息。每个子应用都需要提供一个名称、入口URL、挂载点和一些可选配置项。例如:
const apiEnv = {dev: 'http://localhost:8081/', // 此处不能使用network,必须用local,不然会报错跨域test: 'http://10.11.12.13/api/',production: 'http://10.11.12.13/api/'
}const apps = [{name: '子应用1',entry: process.env.NODE_ENV === 'development' ? apiEnv.dev : '...根据环境去判断用哪个地址,具体不写了', // 子应用的入口URLcontainer: '#subcontainer', // 子应用的挂载点activeRule: '/sub-app1', // 子应用的激活规则,就是子应用的公共路径,设置在createHistory里面的那个},{name: '子应用2',entry: 'http://localhost:8082',container: '#subcontainer',activeRule: '/sub-app2',},// 其他子应用的配置
];
- 调用 registerMicroApps 方法,注册子应用:
registerMicroApps(apps, {// qiankun 生命周期钩子 - 微应用加载前beforeLoad: (app) => {console.log('before load', app.name);return Promise.resolve();},// qiankun 生命周期钩子 - 微应用挂载后afterMount: (app) => {console.log('after mount', app.name);return Promise.resolve();}
});
- 调用 start 方法,启动qiankun微前端应用:
start({sandbox: {experimentalStyleIsolation: false}
});
- 在主应用的根文件里面,要放一个子应用的容器
<template><div id="app"><Header /><div id="container"><Menu v-if="breadCrumbList.length" /><main :id="isSub.length ? 'main' : 'included'"><BreadCrumb v-if="breadCrumbList.length"/><router-view :key="$route.path" ></router-view><section id="commonContainer" v-if="!breadCrumbList.length"></section></main> </div></div>
</template><script>
import Menu from "./layout/Menu.vue";
import Header from "./layout/Header.vue";
import BreadCrumb from "./layout/BreadCrumb";
export default {name: "App",components: {Menu,Header,BreadCrumb,},computed: {isSub() {// vue2写法写起来比较方便,就这样先举例了return this.$route.matched;},},
};
</script>
3、子应用中配置qiankun
- 安装qiankun
- 在main.ts中配置
// Element-plus
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
// Element Plus 组件 默认 使用英语
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// Element-plus图标引入
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// Echarts依赖引入
import * as echarts from 'echarts'
// 引入d3
import * as d3 from 'd3';
// 阿里字体
import "./assets/font/iconfont.css";
import './public-path';
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';
import routes from './router';
import store from './store';
import { getLocationParams } from "@/utils/common.js"// @ts-ignore
let router = null;
let instance = null;
let history = null;// @ts-ignore
function render(props = {}) {// @ts-ignoreconst { container } = props;// @ts-ignorehistory = createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/mainapp/subapp' : '/subapp');// history = createWebHistory();router = createRouter({history,// @ts-ignoreroutes,});// 由于登录页面是用的统一页面,所有登录逻辑放在了导航守卫里面router.beforeEach(async(to, from, next) => {const token = localStorage.getItem('token')if (token) {}else {if (getLocationParams("id_token")) {localStorage.setItem("token", getLocationParams("id_token"));await store.dispatch('getUserInfo')next()}else {store.dispatch('login')}}next()})instance = createApp(App);instance.use(router).use(store).use(ElementPlus, {locale: zhCn,});instance.mount(container ? container.querySelector('#apm') : '#apm');// 全局引入element-plus图标库for (const [key, component] of Object.entries(ElementPlusIconsVue){instance.component(key, component)}
}
// 独立运行时:项目不在乾坤中调用则独立运行
// @ts-ignore
if (!window.__POWERED_BY_QIANKUN__) {render();
}
function storeTest(props) {props.onGlobalStateChange &&props.onGlobalStateChange((value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev),true,);props.setGlobalState &&props.setGlobalState({ignore: props.name,user: {name: props.name,},});
}
/*** bootstrap 只会在微应用初始化的时候调用一次,下次微应用重新进入时会直接调用 mount 钩子,不会再重复触发 bootstrap。* 通常我们可以在这里做一些全局变量的初始化,比如不会在 unmount 阶段被销毁的应用级别的缓存等。*/
// @ts-ignore
export async function bootstrap() {console.log('%c%s', 'color: green;', 'vue3.0 app bootstraped');
}
// 应用每次进入都会调用 mount 方法,通常我们在这里触发应用的渲染方法
export async function mount(props) {console.log('%c%s', 'color: green;',"子应用挂载")storeTest(props);render(props);instance.config.globalProperties.$onGlobalStateChange = props.onGlobalStateChange;instance.config.globalProperties.$setGlobalState = props.setGlobalState;
}
// 应用每次 切出/卸载 会调用的方法,通常在这里我们会卸载微应用的应用实例
export async function unmount() {console.log('%c%s', 'color: red;',"子应用卸载")instance.unmount();instance._container.innerHTML = '';instance = null;// 销毁路由,不然下次进入子应用时,不显示首页,而是展示上次定位的路由页面router = null;history.destroy();
}
- src下新建public-path.ts
// 为了静态资源的引入
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
qiankun的用处:
- 微前端架构:可以将多个独立的应用程序合成一个整体,实现多个团队并行开发、独立部署和运行,提高开发效率和灵活性。
- 独立运行:每个独立的前端应用程序都可以在自己开发环境中进行开发和测试,然后独立部署和运行,这样可以避免应用之间的相互影响和冲突,提高可靠性和稳定性。
- 共享资源:qiankun提供了资源共享的机制,可以将公共的依赖库和资源进行统一管理,避免重复加载和浪费。这样可以减少页面加载时间和资源占用,提高性能和用户体验。
- 动态加载:qiankun支持动态加载子应用,可以根据需要进行按需加载和卸载。这样可以减少初始加载时间和资源占用,提高页面响应速度。
- 跨框架支持:qiankun不仅支持Vue.js,还支持其他主流的前端框架,例如React和Angular。这样可以实现不同框架之间的协同工作,提高开发团队的灵活性和选择性
相关文章:

【qiankun】微前端在项目中的具体使用
1、安装qiankun npm install qiankun --save2、主应用中注册和配置qiankun 在主应用的入口文件main.ts中,引入qiankun的注册方法: import { registerMicroApps, start } from qiankun;创建一个数组,用于配置子应用的相关信息。每个子应用都…...

云安全与多云环境管理:讨论在云计算和多云环境下如何保护数据、应用程序和基础设施的安全
随着云计算和多云环境的广泛应用,企业正面临着数据、应用程序和基础设施安全的新挑战。在这个数字化时代,保护敏感信息和业务运作的连续性变得尤为重要。本文将深入探讨在云计算和多云环境下如何有效地保护数据、应用程序和基础设施的安全。 章节一&…...

npm install ffi各种失败,换命令npm i ffi-napi成功
网上各种帖子安装ffi,基本上到了windows build tools这里会卡住。 使用命令npm install --global --production windows-build-tools 安装报错信息如下: PS E:\codes\nodejsPath\tcpTest> npm install --global --production windows-build-tools …...

0.flink学习资料
论文: (1)google dataflow model 下载链接:p1792-Akidau.pdf (vldb.org) Akidau T, Bradshaw R, Chambers C, et al. The dataflow model: a practical approach to balancing correctness, latency, and cost in massive-scal…...

C语言:字符函数和字符串函数
往期文章 C语言:初识C语言C语言:分支语句和循环语句C语言:函数C语言:数组C语言:操作符详解C语言:指针详解C语言:结构体C语言:数据的存储 目录 往期文章前言1. 函数介绍1.1 strlen1.…...

基于.Net Core开发的医疗信息LIS系统源码
SaaS模式.Net Core版云LIS系统源码 医疗信息LIS系统是专为医院检验科设计的一套实验室信息管理系统,能将实验仪器与计算机组成网络,使病人样品登录、实验数据存取、报告审核、打印分发,实验数据统计分析等繁杂的操作过程实现了智能化、自动化…...

部署工业物联网可以选择哪些通信方案?
部署工业物联网有诸多意义,诸如提升生产效率,降低管理成本,保障生产品质稳定,应对长期从业劳动力变化趋势等。针对不同行业、场景,工业物联网需要选择不同的通信方案,以达到成本和效益的最佳平衡。本篇就简…...

flutter-移动端适配
不同屏幕之间的尺寸适配 使用插件 flutter_screenutil flutter_screenutil flutter 屏幕适配方案,用于调整屏幕和字体大小的flutter插件,让你的UI在不同尺寸的屏幕上都能显示合理的布局! 安装 # add flutter_screenutil flutter_screenutil: ^5.8.4 o…...

MySQL 常用函数
一、数学函数 1、ABS(x) 返回绝对值。 mysql> select abs(-4); --------- | abs(-4) | --------- | 4 | --------- 1 row in set (0.00 sec) 2、PI() 返回圆周率,并四舍五入保留五位小数。 mysql> select pi(); ----------…...

动态路由的实现—正则表达式
文章目录 前言一、什么是正则表达式?二、正则表达式在动态路由中的作用三、实现一个简单的路由调度器总结 前言 动态路由有很多种实现方式,支持的规则、性能等有很大的差异。例如开源的路由实现gorouter支持在路由规则中嵌入正则表达式,例如…...

Android实现超出固定行数折叠文字“查看全文“、“收起全文“
先上效果图 分析问题 网上有很多关于这个的代码,实现都过于复杂了,github上甚至还看到一篇文章600多行代码,结果一跑起来全是bug。还是自己写吧!!! 如果我们需要换行的"查看全文"、"收起全…...

Python上楼梯问题:递归解法探究(斐波那契变种)(记忆化递归)
文章目录 上楼梯问题:递归解法探究问题定义解决方案1. 递归2. 记忆化递归关于python memo{}默认参数和字典的语法语法功能版本信息注意事项 结论 上楼梯问题:递归解法探究 在这篇文章中,将对上楼梯问题进行深入探讨。上楼梯问题是一种常见的…...

AI重新定义音视频生产力“新范式”
// 编者按:AIGC无疑是当下的热门话题和场景。面对AI带来的技术变革和算力挑战,该如何应对?LiveVideoStackCon 2023上海站邀请到了网心科技副总裁武磊为我们分享网心在面对AI应用场景和业务需求下的实践经验。 文/武磊 编辑/LiveVideoStack …...

Jmeter生成可视化的HTML测试报告
Jmeter也是可以生成测试报告的。 性能测试工具Jmeter由于其体积小、使用方便、学习成本低等原因,在现在的性能测试过程中,使用率越来越高,但其本身也有一定的缺点,比如提供的测试结果可视化做的很一般。 不过从3.0版本开始&…...

5G技术与其对智能城市、物联网和虚拟现实领域的影响
随着第五代移动通信技术(5G)的到来,我们即将迈向一个全新的数字化世界。5G技术的引入将带来更高的速度、更低的延迟和更大的连接性,推动了智能城市、物联网和虚拟现实等领域的发展。 首先,5G技术将带来超越以往的网络速…...

leetcode做题笔记88. 合并两个有序数组
给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2,另有两个整数 m 和 n ,分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中,使合并后的数组同样按 非递减顺序 排列。 注意:最终,合并后数组…...

stm32开关控制led灯泡(附Proteus电路图)
说明:我的灯泡工作电压2V,电流设置为10um,注意了不是10毫安时微安啊,要不然电流太小亮不起来的。 2:我用的开关不是按钮button而是switch, 3:PB0,PB1默认都是低电平,采用了PULLDOWN模式,如果设…...

win10 wsl ubuntu 更换版本为18.04 apt换国内源Python换国内源;默认root
控制面板里面应用模块找到Ubuntu,可以卸载或者移动到其他盘。 Microsoft 应用程序 - ubuntu https://apps.microsoft.com/store/search/ubuntu?hlzh-cn&glcn&rtc1 选择想要的版本安装。 cp /etc/apt/sources.list /etc/apt/sources.list.bak nano /etc/ap…...

C++ Primer 第1章 开始
C Primer 第1章 开始 1.1 编写一个简单的C程序1.1.1 编译、运行程序一、程序源文件命名约定二、从命令行运行编译器 练习 1.2 初识输入输出一、标准输入输出对象二、一个使用IO库的程序三、向流写入数据四、使用标准库中的名字五、从流读取数据六、完成程序 1.3 注释简介一、C中…...

【STM32 学习】电源解析(VCC、VDD、VREF+、VBAT)
VCC电源电压GND电源供电负电压(通常接地)VDD模块工作正电压VSS模块工作负电压VREFADC参考正电压VREF-ADC参考负电压VBAT电池或其他电源供电VDDA模拟供电正电压VSSA模拟供电负电压 一、VCC(供电电压) VCC是指芯片的电源电压&#…...

C语言实例_解析GPS源数据
一、GPS数据格式介绍 GPS(全球定位系统)数据格式常见的是NMEA 0183格式,NMEA 0183格式是一种用于导航设备间传输数据的标准格式,定义了一套规范,使得不同厂商的设备可以通过串行通信接口(常见的是RS-232&a…...

LVS+Keepalived
Keepalived概述: keepalived软件 就是通过vrrp协议实现高可用功能 vrrp通信原理: vrrp就是虚拟路由冗余协议,它的出现就是为了解决静态路由的单点故障vrrp是通过一种竞选的一种协议机制将路由交给某台vrrp路由器vrrp用ip多播的方式【多播地…...

uni-app根据经纬度逆解析详细地址
uni-app中的getLocation()方法可以获取到用户当前的地理位置(经纬度)、速度。 但是返回参数中的address在app中才会显示,小程序中不会显示,所以我们需要进行逆解析其地址,解析出它的地址信息。 1.首先要在腾讯位置服务…...

【数据结构】吃透单链表!!!(详细解析~)
目录 前言:一.顺序表的缺陷 && 介绍链表1.顺序表的缺陷2.介绍链表(1)链表的概念(2)链表的结构(3)链表的功能 二.单链表的实现1.创建节点的结构2.头文件函数的声明3.函数的实现ÿ…...

Linux 安全技术和防火墙
目录 1 安全技术 2 防火墙 2.1 防火墙的分类 2.1.1 包过滤防火墙 2.1.2 应用层防火墙 3 Linux 防火墙的基本认识 3.1 iptables & netfilter 3.2 四表五链 4 iptables 4.2 数据包的常见控制类型 4.3 实际操作 4.3.1 加新的防火墙规则 4.3.2 查看规则表 4.3.…...

Mac 开发 Tang Nano FPGA 指南(使用终端和使用 VS Code 和插件,适用所有 Gowin FPGA)
最近收到了一个 Tang nano 9K FPGA开发板,就想借此机会研究一下。 官方文档里介绍如果想使用高云的 FPGA,就需要使用 GOWIN IDE,但是需要申请 license 提交一堆资料,我是别人送的就不太方便让别人弄。加上 IDE 其实并不是很适合学…...

基于深度学习的铁路异物侵限检测算法研究_整体认知感觉欠点意思,但是有一个新的变形卷积-Octave 卷积
相比于其他的交通运输方式,铁路运输具有准时性高、连续性强、速度快、运输量大、运输成本低以及安全可靠等优点。同时由于国家高速铁路网络建设的不断推进,铁路运输逐渐成为我国客运与货运的主要运输方式。虽然铁路运输为人们出行和货物运输带来的极大的…...

Spring项目使用Redis限制用户登录失败的次数以及暂时锁定用户登录权限
文章目录 背景环境代码实现0. 项目结构图(供参考)1. 数据库中的表(供参考)2. 依赖(pom.xml)3. 配置文件(application.yml)4. 配置文件(application-dev.yml)5…...

2023.8 - java - 变量类型
在Java语言中,所有的变量在使用前必须声明。声明变量的基本格式如下: type identifier [ value][, identifier [ value] ...] ; 格式说明: type -- 数据类型。identifier -- 是变量名,可以使用逗号 , 隔开来声明多个同类型变量…...

【Kubernetes】Kubernetes的Pod控制器
Pod控制器 一、Pod 控制器的概念1. Pod 控制器及其功用2. Pod 控制器有多种类型2.1 ReplicaSet2.2 Deployment2.3 DaemonSet2.4 StatefulSet2.5 Job2.6 Cronjob 3. Pod 与控制器之间的关系 二、Pod 控制器的使用1. Deployment2. SatefulSet2.1 为什么要有headless?2…...