wl-micro-frontends：基于vue3.0&qiankun2.0的微前端实战项目

【Github】项目名：wl-micro-frontends：基于vue3.0&qiankun2.0的微前端实战项目

一、项目简介

wl-micro-frontends是一个微前端项目实战的vue项目，基于vue3.0和qiankun2.0进阶版。项目旨在展示微前端的构建、应用间通信、资源下发、鉴权方案以及公共资源处理等多方面的实践操作。

二、核心技术

1. Vue3.0：作为前端框架构建项目的基础，用于创建各个应用的界面和逻辑。
2. qiankun2.0：这是一个开放式微前端架构，用于实现微前端的相关功能，如子应用的注册、加载、卸载以及应用间的通信等。在本项目中，通过qiankun的相关函数，如registerMicroApps、runAfterFirstMounted、setDefaultMountApp和start等实现微前端的架构搭建。
3. Rxjs：在项目的主、子应用间动态通信部分，由于qiankun官方通信机制存在时间推迟和维护人手短缺的情况，项目使用rxjs来作为应用间通信的方案。通过创建Subject实例作为‘呼机’，在主应用和子应用中分别注册监听器来实现各应用间实时监听和同步数据。

三、项目实践案例

1. 主应用与子应用构建
-在构建主应用时，项目创建主项目工程目录，下载qiankun依赖，改造主项目。例如在main.js中导入qiankun内置函数，定义渲染函数、路由监听函数，然后注册子应用，设置默认子应用等操作。同时还需注意主应用的el绑定dom以及vue.config.js中的相关配置。
-构建子应用时，在主应用同级目录创建子项目并进行改造。包括在main.js中对vue及路由实例的声明、导出子应用生命周期函数（如bootstrap、mount、unmount），并且要注意在实例化路由时根据qiankun环境添加前缀等问题。
2. 应用间通信
-静态通信：主应用在注册子应用时可通过props参数传递数据给子应用，子应用在生命周期函数中可接收该数据。例如，在主应用main.js中定义要传递的数据，在注册子应用时传入，子应用在bootstrap函数中可对传入的函数进行处理（如挂载到vue原型上）。
-动态通信：以rxjs为例，主应用中创建Subject实例作为通信介质，在主应用main.js中引入并注册监听器，将通信介质下发给子应用；子应用中注册监听器并在接收到广播消息后处理逻辑。这样可以解决数据改变后的通信问题，如处理主应用登陆后的用户身份改变等情况。
3. 主应用资源下发给子应用
-主应用将自身资源分成data、components、utils、emitFnc等类别下发给子应用。主应用在main.js中导入相关资源，定义要下发的数据，在注册子应用时传入；子应用在main.js的生命周期函数中接收并处理这些资源。例如在子应用的Home.vue中可以使用主应用下发的组件和函数。
4. 微前端鉴权方案
-异步注册：主应用异步请求获取子应用注册表及菜单数据，处理后异步注册子应用并下发子应用路由，子应用根据qiankun环境使用主应用下发的路由数据实例化路由。
-异步路由：通过应用间通信通知子应用路由数据，子应用在内部addRoutes异步插入路由（此方案与token结合较为复杂）。
5. 各应用间路由基础管理
-主应用内设置路由监控，通过genActiveRule函数定义路由前缀规则用于注册子应用；子应用内设置路由前缀，使其与主应用注册时的规则一致，以实现应用内路由跳转及跨应用路由处理。
6. 公共资源处理
-在开发环境中，利用gitsubtree将公共资源仓库添加到应用仓库中，方便开发过程中的资源共享和维护，并且要遵循向上兼容和可扩展性的原则。在生产环境中，主应用引入，子应用判断qiankun环境，若为qiankun环境则忽略打包第三方依赖。

四、项目总结

wl-micro-frontends项目为基于vue和qiankun的微前端实践提供了一个较为全面的示例，涵盖了从基础构建到复杂功能实现的多个方面。希望大家能够从这个项目中学习到微前端相关的知识和实践技巧。如果你对这个项目有任何疑问或者建议，欢迎在评论区留言参与讨论。

项目地址

GitHub链接直达