微前端实战看这篇就够了

这篇就够了"/>

微前端实战看这篇就够了

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异步插入路由)
• 各应用间路由基础管理
• 公共资源处理

微前端主应用与子应用如何构建

构建主应用

1. 创建一个主项目工程目录
2. npm install qiankun 下载微前端方案依赖
3. 改造主项目：

在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-view",props: {