持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情
本文已参与「新人创作礼」活动.一起开启掘金创作之路。
基于 qiankun 的微前端项目
对于复杂的后台 管理系统，可以使用qiankun框架进行整合，这里采用 vue作为主应用基座，接入不同技术栈的微应用。
第一步：构建主应用，并在里面注册子应用
import { registerMicroApps, start } from 'qiankun';
\
registerMicroApps([
{
name: 'react app',
entry: '//localhost:7100',
container: '#yourContainer',
activeRule: '/yourActiveRule',
},
{
name: 'vue app',
entry: { scripts: ['//localhost:7100/main.js'] },
container: '#yourContainer2',
activeRule: '/yourActiveRule2',
},
]);
\
start();
\
第二步：在主应用里配置组件和子应用的显示区域
\
第三步：微应用需要在自己的入口 js 导出bootstrap、mount、unmount三个生命周期钩子，以供主应用在适当的时机调用。
/**
* bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
* 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
*/
export async function bootstrap() {
console.log("VueMicroApp bootstraped");
}
\
/**
* 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
*/
export async function mount(props) {
console.log("VueMicroApp mount", props);
render(props);
}
\
/**
* 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
*/
export async function unmount() {
console.log("VueMicroApp unmount");
instance.$destroy();
instance = null;
router = null;
}
第四步：启动主应用
\
registerMicroApps(apps, {
// qiankun 生命周期钩子 - 加载前
beforeLoad: (app: any) => {
console.log("before load", app.name);
return Promise.resolve();
},
// qiankun 生命周期钩子 - 挂载后
afterMount: (app: any) => {
// 加载子应用前，进度条加载完成
NProgress.done();
console.log("after mount", app.name);
return Promise.resolve();
},
});
\
/**
* 添加全局的未捕获异常处理器
*/
addGlobalUncaughtErrorHandler((event: Event | string) => {
console.error(event);
const { message: msg } = event as any;
// 加载失败时提示
if (msg && msg.includes("died in status LOADING_SOURCE_CODE")) {
message.error("子应用加载失败，请检查应用是否可运行");
}
});
