微前端框架 qiankun 配置使用【基于 vue/react脚手架创建项目 】

qiankun官方文档:qiankun - qiankun

一、创建主应用:

这里以  vue  为主应用,vue版本:2.x

// 全局安装vue脚手架
npm install -g @vue/clivue create main-app

省略 vue 创建项目过程,若不会可以自行百度查阅教程

二、到  主应用(main-app)目录下,安装微前端框架依赖  qiankun:

npm i qiankun -S

三、改造主应用(main-app):

       1. 为主应用(main-app)添加路由:

vue add router

       2. 打开主应用(main-app)入口文件(main.js),修改部分代码:

        直接上这部分代码:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { registerMicroApps, start } from 'qiankun';registerMicroApps([{name: 'react app', // app name registeredentry: '//localhost:3000',container: '#home',activeRule: '/',},{name: 'vue app',entry: { scripts: ['//localhost:8888/main.js'] },container: '#about',activeRule: '/vue',},
]);start();
Vue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#app')

由于原来添加路由在  src/views  目录下存在两个文件:

HomeView.vue      AboutView.vue

改造这两个文件,和main.js中配置的对应:

 四、创建子应用  react:

//全局安装 create-react-app 脚手架
npm install -g create-react-app//创建项目
create-react-app child-react

改造  src  下的  index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';/*** bootstrap 只会在微应用初始化的时候调用一次,下次微应用重新进入时会直接调用 mount 钩子,不会再重复触发 bootstrap。* 通常我们可以在这里做一些全局变量的初始化,比如不会在 unmount 阶段被销毁的应用级别的缓存等。*/
export async function bootstrap() {console.log('react app bootstraped');
}/*** 应用每次进入都会调用 mount 方法,通常我们在这里触发应用的渲染方法*/
export async function mount(props) {ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
}/*** 应用每次 切出/卸载 会调用的方法,通常在这里我们会卸载微应用的应用实例*/
export async function unmount(props) {ReactDOM.unmountComponentAtNode(props.container ? props.container.querySelector('#root') : document.getElementById('root'),);
}/*** 可选生命周期钩子,仅使用 loadMicroApp 方式加载微应用时生效*/
export async function update(props) {console.log('update props', props);
}const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><App /></React.StrictMode>
);reportWebVitals();

然后 npm start  把  react子应用跑起来,运行如下图: 

五、创建  vue 子应用:

 

vue create child-vue

然后改造  vue 子应用的main.js

// src/main.js
import Vue from 'vue'
import App from './App'Vue.config.productionTip = false// 定义一个Vue实例
let instance = null
// 渲染方法
function render(props = {}) {const { container } = propsinstance = new Vue({render: (h) => h(App)}).$mount(container ? container.querySelector('#app'): '#app')
}
// 独立运行时
if(!window.__POWERED_BY_QIANKUN__) {render()
}
//暴露主应用生命周期钩子
/*** bootstrap : 在微应用初始化的时候调用一次,之后的生命周期里不再调用*/
export async function bootstrap() {console.log('vue2-app bootstraped');
}
/*** mount : 在应用每次进入时调用*/
export async function mount(props) {console.log('vue2-app mount', props);render(props);
}
/*** unmount :应用每次 切出/卸载 均会调用*/
export async function unmount() {console.log("vue2-app unmount")instance.$destroy();instance.$el.innerHTML = '';instance = null;
}

修改 vue.config.js:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,devServer: {port: 8888}
})

然后运行  vue  子应用即可

另外,有两个问题还没有解决:

        1.子应用资源引入问题 ,默认使用的主应用的地址

        2.主应用偶尔报错:

  

 

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

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

相关文章

【Docker】常用命令 docker restart

文章目录 什么是docker restart命令基本用法常用选项-t&#xff1a;指定重新启动容器的超时时间-f&#xff1a;强制重新启动容器 实际示例重新启动一个正在运行的Nginx容器强制重新启动一个运行中的数据库容器 总结 在Docker中&#xff0c; docker restart命令用于重新启动正在…

java垃圾回收-三色标记法

三色标记法 引言什么是三色标记法白色灰色黑色 三色标记过程三色标记带来的问题多标问题漏标问题 如何弥补漏标问题增量更新原始快照总结 引言 在CMS,G1这种并发的垃圾收集器收集对象时&#xff0c;假如一个对象A被GC线程标记为不可达对象&#xff0c;但是用户线程又把A对象做…

MySQL 常见用法练习

LIMIT [参数1]--m,参数2--n; #表示从跳过m条数据开始取n行数据 #参数1为可选参数,表示跳过m条数据(默认为0) eg:1表示从第二行开始 #参数2为必选参数,表示取几行数据 SELECT *FROM employees ORDER BY hire_date DESC LIMIT 1; SELECT *FROM employees ORDER BY hire…

数字化经济的前沿:深入了解 Web3 的商业模式

随着区块链技术的迅速发展&#xff0c;Web3作为一种新型的互联网范式&#xff0c;正逐渐引起人们的关注。它不仅仅是一种技术革新&#xff0c;更是一种商业模式和价值观的转变。本文将深入探讨Web3的商业模式&#xff0c;以及它对数字化经济的影响。 1. 理解Web3的商业模式 We…

解决 Java 错误 Unreachable Statement

本篇文章介绍了 Java 中的 unreachable statement 错误。 Java中出现 unreachable statement 错误的原因 当我们尝试在分支控制流语句之后放置语句时&#xff0c;会发生不可到达语句错误。 分支语句包括 break、continue 和 return&#xff0c;它们用于跳转到代码的不同部分。…

go get x509:certificate signed by unknown authority

概述 在arm设备上构建golang 1.22的Docker镜像&#xff0c;用来做程序的编译镜像&#xff0c;直接安装用ubuntu作为基础镜像&#xff0c;构建好的镜像&#xff0c;在编译的时候执行go get的时候&#xff0c;会报下面错误 go: github.com/***: Get "https://goproxy.cn/g…

Qt教程3-Ubuntu(x86_64)上配置arm64(aarch64)交叉编译环境及QT编译arm64架构工程

详见&#xff1a; Qt教程3-Ubuntu(x86_64)上配置arm64(aarch64)交叉编译环境及QT编译arm64架构工程

算法---滑动窗口练习-4(无重复字符的最长子串)

无重复字符的最长子串 1. 题目解析2. 讲解算法原理3. 编写代码 1. 题目解析 题目地址&#xff1a;点这里 2. 讲解算法原理 算法的主要思想是使用滑动窗口来维护一个不含重复字符的子串。定义两个指针 left 和 right 分别表示窗口的左边界和右边界。还定义了一个数组 hash 来记…

华为认证云计算专家(HCIE-Cloud Computing)–单选题

华为认证云计算专家&#xff08;HCIE-Cloud Computing&#xff09;–单选题 13.( 单选)WAF服务属于以下哪个安全子领域() A 应用安全 B 数据安全 C 主机安全 D 安全管理 E 网络安全 正确答案&#xff1a;A 24 (单选题)以下关于非容灾&#xff0c;Global与Region融合部署场景&…

redis配置文件详情

redis自带两个conf配置文件&#xff0c;redis.conf为redis配置文件&#xff0c;sentinel.conf为哨兵配置文件。 注意&#xff1a;修改配置文件需要重启生效。 一、redis.conf为redis的配置文件 # redis进程是否以守护进程的方式运行&#xff0c;yes为是&#xff0c;no为否(不…

Apache Paimon 的 CDC Ingestion 概述

CDC Ingestion 1&#xff09;概述 Paimon支持schema evolution将数据插入到Paimon表中&#xff0c;添加的列将实时同步到Paimon表&#xff0c;并且无需重启同步作业。 目前支持的同步方式如下&#xff1a; MySQL Synchronizing Table: 将MySQL中的一个或多个表同步到一个Pa…

【算法与数据结构】深入解析二叉树(一)

文章目录 &#x1f4dd;数概念及结构&#x1f320; 树的概念&#x1f309;树的表示&#x1f320; 树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; &#x1f309;二叉树概念及结构&#x1f320;概念&#x1f309;数据结构中的二叉树&#x1f320;特殊的二叉…

Spring web MVC(2)

1、RequestMapping称为路由映射&#xff08;既是类注解也是方法注解提供访问路径&#xff09; 2、RequestParam起到重命名的作用&#xff0c;也起到绑定的作用&#xff0c;传递集合list时会用到&#xff0c;多个值绑定给list&#xff0c;默认是必传参数如果不传参数需要设置re…

如何在Windows 10上打开和关闭平板模式?这里提供详细步骤

前言 默认情况下&#xff0c;当你将可翻转PC重新配置为平板模式时&#xff0c;Windows 10会自动切换到平板模式。如果你希望手动打开或关闭平板模式&#xff0c;有几种方法可以实现。​ 自动平板模式在Windows 10上如何工作 如果你使用的是二合一可翻转笔记本电脑&#xff0…

Spring, SpringBoot, SpringCloud,微服务

1,SSM (Spring+SpringMVC+MyBatis) SSM框架集由Spring、MyBatis两个开源框架整合而成(SpringMVC是Spring中的部分内容),常作为数据源较简单的web项目的框架。 Spring MVC 是 Spring 提供的一个基于 MVC 设计模式的轻量级 Web 开发框架,本质上相当于 Servlet,Controlle…

vue 基于elementUI/antd-vue, h函数实现message中嵌套链接跳转到指定路由 (h函数点击事件的写法)

效果如图&#xff1a; 点击message 组件中的 工单管理&#xff0c; 跳转到工单管理页面。 以下是基于vue3 antd-vue 代码如下&#xff1a; import { message } from ant-design-vue; import { h, reactive, ref, watch } from vue; import { useRouter } from vue-router; c…

PY32离线烧录器功能介绍,可批量烧录,支持PY32系列多款单片机

PY32离线烧录器可以对PY系列单片机进行批量烧录&#xff0c;现支持PY32F002A/002B/002/003/030/071/072/040/403/303芯片各封装和XL2409&#xff0c;XL32F001/003等芯片。PY32离线烧录器需要搭配上位机软件才能使用&#xff0c;上位机软件在我们官网&#xff08;www.xinlinggo.…

代码随想录刷题第60天

最后一题了。最后一题是柱状图中最大的矩形https://leetcode.cn/problems/largest-rectangle-in-histogram/&#xff0c;和接雨水遥相呼应的一道题&#xff0c;我们需要找到当前遍历数字左右两边第一个小于当前数字的值&#xff0c;通过保证单调栈中数字为递减顺序&#xff0c;…

Hive集合函数 collect_set 和 collect_list 使用示例

Hive集合函数 collect_set 和 collect_list 使用示例 在Hive中&#xff0c; collect_set 和 collect_list 是用于收集数据并将其存储为集合的聚合 函数。以下是它们的语法&#xff1a; 1. collect_set(expression)- expression : 要收集的数据表达式。collect_set 函数用于将…

【软考】UML中的图之对象图

目录 1. 说明2. 图示3. 特性 1. 说明 1.对象图即object diagram2.展现了某一时刻一组对象以及它们之间的关系3.描述了在类图中所建立的事物的实例的静态快照4.对象图一般包括对象和链5.对象图展示的是对象之间关系&#xff0c;不存在交互&#xff0c;所以不是交互图 2. 图示 …