一、安装
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<Function> 当不需要微应用隔离(常见于微应用为同域的legacy系统、无法修改window路由等打开方式)时,可以借助此函数路由重写,规避 qiankun 改写 url 导致的路由处理问题。 singular: 非必选项,是否单例模式,默认为 true。 sandbox: 非必选项,为微应用配置沙箱。 mountElementId: 非必选项,确定唯一的 DOM 容器节点 id。 getTemplate: 非必选项,getTemplate 方法将在 initial 阶段调用,可用于改写 template。 render: 非必选项,更自由的 render 方法,用于自定义渲染行为。 history: 非必选项,设置微应用的 history 模式,可选browser、hash和memory。 lifeCycles: 指定微应用的生命周期钩子函数,包括 onl oad、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值相同
<div id="app"> <nav> <router-link to="/home" @click="type = ''">Home</router-link> | <router-link to="/vue-child/" @click="type = 'vue-child'">About</router-link> </nav> <!-- 子应用容器,子应用挂载之前要有,不然挂载失败。id值要与注册时属性container的值相同--> <div id="vueChild"></div> <!-- 页面视口,用于显示主应用的内容,跟子应用没关系--> <router-view ></router-view> </div>
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
标签:console,框架,前端,qiankun,window,应用,props,app From: https://www.cnblogs.com/weichen913/p/17677981.html