微前端框架qiankun（微前端框架开源）

本篇文章给大家谈谈微前端框架qiankun，以及微前端框架开源对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享微前端框架qiankun的知识，其中也会对微前端框架开源进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、next.js可以用qiankun吗
• 2、阿里 qiankun 微前端框架实践
• 3、qiankun微前端框架处理

next.js可以用qiankun吗

qiankun : 是一个生产可用的微前端框架，它基于 single-spa，具备 js 沙箱、样式隔离、HTML Loader、预加载 等微前端系统所需的能力。qiankun 可以用于任意 js 框架，微应用接入像嵌入一个 iframe 系统一样简单。
应用场景: 1. 主应用与多个相互独自的微应用 一起构成了整个大的微前端应用
2. 可以在同一个页面中，加载多个不同的微应用，每个微应用都是主应用的组成部分 或者是 提供一些增强能力，这种场景可以说是微应用粒度的前端组件化。
即: qiankun 相当于 route-based 的控制台应用，做为一个微应用的聚合框架而被使用。
使用步骤:
1. 主应用安装
yarn add qiankun # or npm i qiankun -S
2. 在主应用中注册微应用
import { registerMicroApps,runAfterFirstMounted, start } from 'qiankun';

// window.qiankunStarted 为严谨,防止加载多次 (可省略)
if (!window.qiankunStarted) {
window.qiankunStarted = true;
registerMicroApps(
[
{
name: 'invoice', // 子应用名的标识
entry: `${process.env.VUE_APP_INVOICE_URL}`, // 子应用的目标地址, 可在环境变量中配置
container: '#subapp-viewport', // 把加载到的子路由界面放在某个容器中
// loader,
activeRule: '/invoice', // 加载以/invoice开头的路由
},

],
// 主应用的生命周期
// {
// beforeLoad: [
// app = {
// console.log('[LifeCycle] before load %c%s', 'color: green;', app.name);
// },
// ],
// beforeMount: [
// app = {
// console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name);
// },
// ],
// afterUnmount: [
// app = {
// console.log('[LifeCycle] after unmount %c%s', 'color: green;', app.name);
// },
// ],
// },
);

// 初始化主应用属性
// const { onGlobalStateChange, setGlobalState } = initGlobalState({
// // user: 'qiankun',
// });

// onGlobalStateChange((value, prev) = console.log('[onGlobalStateChange - master]:', value, prev));

// 设置自定义属性可传参到子应用中, 在子应用的mounted钩子中使用prop属性来接受
// setGlobalState({
// // ignore: 'master',
// // user: {
// // name: 'master',
// // },
// });
// setDefaultMountApp('/');
start();

// runAfterFirstMounted(() = {
// console.log('[MainApp] first app mounted');
// });
}
当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子。
3. 配置渲染微应用容器的路由
3. 在微应用中导出相应的生命周期钩子
3.1. 在微应用的 src 目录新增 public-path.js
if (window.__POWERED_BY_QIANKUN__) {
// eslint-disable-next-line no-undef
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
3.2. 修改微应用中的路由文件router.js ，根据微应用标识限制路由范围
3.3. 入口文件 main.js 修改，为了避免根 id #app 与其他的 DOM 冲突，需要限制查找范围。
// 在微应用中的main.js中配置

let instance = null;
function render(props = {}) {
// props对象中的container属性指的是主应用的dom
const { container } = props;
instance = new Vue({
router,
store,
render: (h) = h(App),
}).$mount(container ? container.querySelector('#app') : document.querySelector('#app'));
}

// 独立运行微应用时
if (!window.__POWERED_BY_QIANKUN__) {

render();
}

/**
* bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
* 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
*/
export async function bootstrap() {
console.log('[vue] vue app bootstraped');
}

// 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
export async function mount(props) {
console.log('[vue] props from main framework', props);
render(props);
}
// unmount时销毁应用, 防止内存泄漏
export async function unmount() {
instance.$destroy();
instance.$el.innerHTML = '';
instance = null;
}
4. 配置微应用的打包工具（vue.config.js）
const { name } = require('./package');
module.exports = {
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
},
},
configureWebpack: {
output: {
library: `invoice`, // 应用标识, 和name保持一致
libraryTarget: 'window', // 把微应用打包成window格式
jsonpFunction: `webpackJsonp_${name}`,
},
},
};
使用qiankun微应用需要注意几点:
1. 在微应用src中新增 public-path.js 文件，用于修改运行时的 publicPath
2. 微应用建议使用 history 模式的路由，需要设置路由 base，值和它的 activeRule 是一样的。
3. 在入口文件最顶部引入 public-path.js，修改并导出三个生命周期函数。
4. 修改 webpack 打包。
主应用路由配置需要注意到的点:
1. 微应用入口路由需配置在主应用的后面. 否则主应用的界面显示不出来
2. 如遇到路由显示的顺序问题, 如上图, 第一个路由菜单需显示在左侧导航栏的最后面, 可以给每个路由设置order属性, 用于在渲染导航栏菜单之前进行排序.
3. 如遇到样式冲突, 则各自加载各自的vue和elementUI

阿里 qiankun 微前端框架实践

qiankun ——— 一套完整的微前端解决方案： https://github.com/umijs/qiankun

如图所示，在qiankun框架中，有主程序与子程序。主程序会留出指定的DOM作为子程序的容器，并且通过主程序里的路由转发加载子应用。

修改主程序main.js注册子应用

修改主程App.vue注册子应用的容器

main.js

Demo： github.com/justworkhar…

与传统的父子组件通信一样，父程序通过props向子程序传递信息。子程序通过回调函数向父程序传递信息。

qiankun框架说白了就是通过在主程中添加一个展示子程序的DOM，经过路由判断做转发加载子程序。

qiankun微前端框架处理

https://blog.csdn-/qq_41694291/article/details/113842872

概念：微前端的概念借鉴于后端的微服务，一般以业务功能为拆分单元
解决问题：大型项目的变更、扩展、维护困难的问题

总体积变大，插件可上传cdn，但公共函数资源不便于共享

iframe ：隔离性和兼容性好，性能和使用感差（性能差因为不会有缓存，每次重新加载）
基座模式 ：基于 路由分发 ，由基座监听路由变化，加载不同的应用，实现应用解耦，single-spa、qiankun
组合式集成 ：组件单独打包发布，类似于npm包
EMP ：主要基于Webpack5 Module Federation
web components ：

我们采用的是qiankun，主要思路是将一个大应用，拆分为更小的、可独立开发、测试、部署的子应用。

传统的大型项目：所有模块都在一个应用里，由应用本身负责路由管理，属于 应用分发路由 方式
拆分微应用的项目：属于基座模式下的系统架构，各应用互相独立，单独运行在不同的服务上，基座（基座一般是用户最终访问的应用）根据路由去加载不同的应用到页面上，即 路由分发应用 方式

微前段主要需要解决的问题有两个

qiankun和single-spa对比

activePath与当前的hash对比一致

关于微前端框架qiankun和微前端框架开源的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 微前端框架qiankun的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于微前端框架开源、微前端框架qiankun的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。