一、安装
1、主应用安装qiankun(子应用只做代码配置，无需任何安装)
yarn add qiankun # 或者 npm i qiankun -S
二、关键参数介绍
1、主应用注册微应用
import { registerMicroApps, start, setDefaultMountApp, loadMicroApp } from 'qiankun';
registerMicroApps(apps, lifeCycles?) 是qiankun框架的一个方法，用于注册微前端应用，apps树数组，元素是对象，每个元素即为一个子应用的注册信息，lifeCycles是生命周期钩子
//apps元素属性介绍
name: 必选项，当前应用的名称，也就是微应用的名称。
entry: 必选项，微应用的入口，可以是URL链接，也可以是一个fetch函数，用于获取应用静态资源。
container: 必选项，微应用渲染的节点，也就是挂载点。
activeRule: 必选项，激活微应用的规则，可以是字符串、函数或者Array。如地址路径。
props: 非必选项，主应用传递给微应用的数据，也就是传递的参数。
loader: 自定义的加载函数，可以用来监听微应用的加载情况。
rewriteRule: Optional
singular: 非必选项，是否单例模式，默认为 true。
sandbox: 非必选项，为微应用配置沙箱。
mountElementId: 非必选项，确定唯一的 DOM 容器节点 id。
getTemplate: 非必选项，getTemplate 方法将在 initial 阶段调用，可用于改写 template。
render: 非必选项，更自由的 render 方法，用于自定义渲染行为。
history: 非必选项，设置微应用的 history 模式，可选browser、hash和memory。
lifeCycles: 指定微应用的生命周期钩子函数，包括 onload、onmount、onunmount。///lifeCycles介绍
beforeLoad: 可选项，微应用加载前的生命周期钩子，Promise。
beforeMount: 可选项，微应用装载前的生命周期钩子，Promise。
afterMount: 可选项，微应用装载后的生命周期钩子，Promise。
beforeUnmount: 可选项，微应用卸载前的生命周期钩子，Promise。
afterUnmount: 可选项，微应用卸载后的生命周期钩子，Promise。
start()启用qiankun
在js文件中可通过回调验证启用是否成功
// 启动qiankun
start().then(() => {
console.log('qiankun启动成功');
}).catch(err => {
console.error('qiankun启动失败', err);
});
setDefaultMountApp设置主应用启动后立即进入的微应用
import { setDefaultMountApp } from 'qiankun';
//入参为子应用的激活路由
setDefaultMountApp('/homeApp');
loadMicroApp 手动加载微应用，无需在registerMicroApps中注册
它可以在任何时候任何地方加载一个微应用。如果你需要在特定的时机启动并加载剩余的微应用
说明：不需要激活路由，loadMicroApp执行后会在当前路由立即加载子服务
// 导入loadMicroApp方法
import { loadMicroApp } from 'qiankun'
// 当你需要使用reactChild的时候，开始加载和启动它
const app = loadMicroApp(
{
name: 'reactChild',
entry: '//localhost:1111',
container: '#reactChild',
}
);
// 当你不再需要这个应用的时候，可以卸载它
app.unmount();
二、项目配置
1、主应用配置
main.js引入qiankun，注册子应用
import { registerMicroApps, start } from 'qiankun';
/ 微应用的信息
const apps = [
{
name: 'vueChild', //应用的名字
entry: '//10.3.124.216:10200', // 应用的入口，即子应用的访问地址
container: '#vueChild', // 容器名
activeRule: '/vue-child', //激活的路径，即但URL成http://xxxx:'端口'/vue-child/#/时，触发加载子应用
},
];
// 注册微应用 registerMicroApps第二个参数配置钩子函数
registerMicroApps(apps,{
beforeLoad: [
app => {
console.log('beforeLoad')
console.log(app)
},
],
beforeMount: [
app => {
console.log('beforeMount')
},
],
afterUnmount: [
app => {
console.log('afterUnmount')
},
],
});
// 启动qiankun，也可传参，参考qiankun1——参数介绍
start()
2、设置子应用的容器
即在主应用页面提供一个插入子应用的dom节点，节点id与注册时的container值相同
3、子应用配置
1、在src 目录新增public-path.js
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
2、main.js引入public-path.js
3、配置main.js
let instance = null
function render(props = {}) {
const { container } = props
instance = new Vue({
router,
store,
render: h => h(App)
}).$mount(container ? container.querySelector('#app') : '#app')//为了避免根 id
#app 与其他的 DOM 冲突，需要限制查找范围。
}// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
render()
}
export async function bootstrap() {
console.log('vue app bootstraped')
}
export async function mount(props) {
render(props)
}
export async function unmount() {
instance.$destroy()
instance.$el.innerHTML = ''
instance = null
}
4、修改webpack的打包配置
//1、处理跨域
devServer: {
// 监听端口
port: 10200,
// 配置跨域请求头，解决开发环境的跨域问题
headers: {
"Access-Control-Allow-Origin": "*",
},
},
chainWebpack: (config) => {
//配置打包
config.output.library('vueChild').libraryTarget('umd')
},
三、子父应用通信
1、初始加载时通信
//主应用
//注册子应用时，参数通过props传递，可传递参数和回调函数
const apps = [
{
name: 'vueChild', //应用的名字
entry: '//localhost:10200', // 应用的入口
container: '#vueChild', // 容器名
activeRule: '/vue-child', //激活的路径，即但URL成http://xxxx:'端口'/vue-child/#/时，触发加载子应用
props: {
message: 'Hello from main app!',
callback: (data) => {
console.log('Data received from subApp-1:', data);
},
},
},
//子应用
//在钩子函数中接收
export async function mount(props) {
console.log('child',props)
render(props)
props.callback('Hello from subApp-1.');
}
2、加载后的自定义事件传参
//使用浏览器的CustomEvent、dispatchEvent、addEventListener API进行监听
// 主应用
window.addEventListener('subAppEvent', (event) => {
console.log('Received event from subApp:', event.detail);
});
// 子应用
const event = new CustomEvent('subAppEvent', { detail: 'Hello from subApp!' });
window.dispatchEvent(event);
3、卸载时传参
使用自定义传参方式将参数从子组件传递给父组件，只需在相应的应用钩子中触发。
4、子应用与子应用间通信
//1、基于事件的方式进行通信
// 子应用A发送事件
window.dispatchEvent(new CustomEvent('eventName', { detail: 'payload' }))
// 子应用B监听事件
window.addEventListener('eventName', (event) => { console.log(event.detail) })
//2、利用全局变量/函数方式进行通信
//在主应用中定义全局的变量或者函数作为 "通信管道"，然后在子应用中调用这些全局的变量或者函数来进行通信
// 主应用
window.globalVar = { /* 全局变量 */ }
window.globalFunc = function() { /* 全局函数 */ }
// 子应用
console.log(window.globalVar)
window.globalFunc()
//3、使用Redux、Vuex状态管理库
//4、使用缓存如：localStorage