微前端——乾坤qiankun Demo

Posted 2023-03-15

参考技术A

微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆，拆完后在合！

我们可以将一个应用划分成若干个子应用，将子应用打包成一个个的 lib 。当路径切换 时加载不同的子应用。这样每个子应用都是独立的，技术栈也不用做限制了！从而解决了前端协同开发问题。

文档地址： https://qiankun.umijs.org/zh

2018 年 Single-SPA 诞生了， single-spa 是一个用于前端微服务化的 javascript 前端解决方案 ( 本身没有处理样式隔离， js 执行隔离 ) 实现了路由劫持和应用加载。

2019 年 qiankun 基于 Single-SPA, 提供了更加开箱即用的 API （ single-spa + sandbox + import-html-entry ） 做到了，技术栈无关、并且接入简单（像 i frame 一样简单）。

这里我们打算建立三个项目进行实操，一个Vue项目充当主应用，另一个Vue和React应用充当子应用

基座：qiankun-base 子应用：qiankun-vue、qiankun-react

react + react-router 技术栈的主应用：只需要让子应用的 activeRule 包含主应用的这个路由即可。

vue + vue-router 技术栈的主应用:

用绝对路径，不用用相对路径，例如

qiankun 只能解决子项目之间的样式相互污染，不能解决子项目的样式污染主项目的样式
冲突的样式，采用BEM命名方式

子应用，需要增加 update 钩子以便主应用手动更新微应用

主应用，直接调用子应用实例的 update 方法即可