wl-micro-frontends [wl-qiankun]
本项目采用 vue + qiankun 实践微前端落地。
同时qiankun是一个开放式微前端架构,支持当前三大前端框架甚至jq等其他项目无缝接入。
此项目为了尽可能的简单易上手,以及方便文章讲解,大部分逻辑都在主应用和子应用的main.js来回施展,
实际项目应用可不要如此粗暴,要有优雅的架构设计。
在线地址
项目启动
npm run cinit
npm run init
下载依赖,因为是批量下载所有应用下的依赖,推荐cinit节省下载时间
npm run serve
运行项目,同样,批量运行所有应用会耗时较久,浏览器页面自动打开后请稍家等待,然后刷新即可
npm run build
打包项目,打包所有应用
微前端 qiankun
微前端是什么、为什么要做微前端、qiankun是什么这些笔者将不再叙述。(文末有彩蛋~)
传送门:可能是你见过最完善的微前端解决方案 & qiankun
下面直接进入实战教程。
实战教程目录详解
鉴于qiankun文档只有寥寥十几行,这里做一个尽量详细的实战示例描述:
- 微前端主应用与子应用如何构建
- 主应用与子应用通信(静态,无法监测到值变化)
- 主、子,各应用间动态通信(动态,各应用间实时监听,同步数据)
- 主应用资源下发至子应用
- 微前端鉴权方案
- 一:异步注册(主应用异步获取子应用注册表并将子应用对应的路由下发至子应用)
- 二:异步路由(使用应用间通信,通知子应用路由数据,子应用在内部addRoutes异步插入路由)
- 各应用间路由基础管理
- 公共资源处理
微前端主应用与子应用如何构建
构建主应用
- 创建一个主项目工程目录
- npm install qiankun 下载微前端方案依赖
- 改造主项目:
在main.js中
// 导入qiankun内置函数
import {
registerMicroApps, // 注册子应用
runAfterFirstMounted, // 第一个子应用装载完毕
setDefaultMountApp, // 设置默认装载子应用
start // 启动
} from "qiankun";
let app = null;
/**
* 渲染函数
* appContent 子应用html
* loading 如果主应用设置loading效果,可不要
*/
function render({ appContent, loading } = {}) {
if (!app) {
app = new Vue({
el: "#container",
router,
store,
data() {
return {
content: appContent,
loading
};
},
render(h) {
return h(App, {
props: {
content: this.content,
loading: this.loading
}
});
}
});
} else {
app.content = appContent;
app.loading = loading;
}
};
/**
* 路由监听
* @param {*} routerPrefix 前缀
*/
function genActiveRule(routerPrefix) {
return location => location.pathname.startsWith(routerPrefix);
}
// 调用渲染主应用
render();
// 注册子应用
registerMicroApps(
[
{
name: "vue-aaa"
entry: "//localhost:7771",
render,
activeRule: genActiveRule("/aaa")
},
{
name: "vue-bbb"
entry: "//localhost:7772",
render,
activeRule: genActiveRule("/bbb")
},
],
{
beforeLoad: [
app => {
console.log("before load", app);
}
], // 挂载前回调
beforeMount: [
app => {
console.log("before mount", app);
}
], // 挂载后回调
afterUnmount: [
app => {
console.log("after unload", app);
}
] // 卸载后回调
}
)
// 设置默认子应用,参数与注册子应用时genActiveRule("/aaa")函数内的参数一致
setDefaultMountApp("/aaa");
// 第一个子应用加载完毕回调
runAfterFirstMounted(()=>{});
// 启动微服务
start();
注意, 主应用的el绑定dom为#container,因此你也需要修改一下index.hrml模板中的id
在app.vue中,增加一个渲染子应用的盒子
<template>
<div id="root" class="main-container">
<div class="main-container-menu">
</div>
<!-- 子应用盒子 -->
<div id="root-view" class="app-view-box" v-html="content"></div>
</div>
</template>
<script>
export default {
name: "root-vie