基于 Qiankun 的微前端集成 Vue.js 和 React.js 子应用

2024-02-17 08:35:08

在微前端架构中无缝集成 Vue.js 和 React.js

集成 Vue.js 子应用

创建 Vue.js 子应用

首先，使用 Vue CLI 创建一个新的 Vue.js 项目：

vue create vue-subapp

配置 Qiankun

在宿主应用程序中，安装 Qiankun 并配置子应用程序：

npm install --save qiankun

// index.js
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'vue-subapp',
    entry: '//localhost:7100', // 子应用地址
    container: '#vue-container', // 容器元素 ID
  },
]);

start();

启动子应用

在 Vue.js 子应用程序中，启动微前端引擎：

// main.js
import { initGlobalState, registerMicroApps, start } from 'qiankun';

initGlobalState({
  // 跨子应用共享状态
});

registerMicroApps([
  {
    name: 'host', // 宿主应用名称
    entry: '//localhost:8080', // 宿主应用地址
  },
]);

start();

集成 React.js 子应用

创建 React.js 子应用

使用 Create React App 创建一个新的 React.js 应用程序：

npx create-react-app react-subapp

配置 Qiankun

在宿主应用程序中，将 React.js 子应用程序添加到注册列表：

// index.js
registerMicroApps([
  // ...
  {
    name: 'react-subapp',
    entry: '//localhost:7200', // 子应用地址
    container: '#react-container', // 容器元素 ID
  },
]);

启动子应用

在 React.js 子应用程序中，启动微前端引擎：

// App.js
import { initGlobalState, registerMicroApps, start } from 'qiankun';

initGlobalState({
  // 跨子应用共享状态
});

registerMicroApps([
  {
    name: 'host', // 宿主应用名称
    entry: '//localhost:8080', // 宿主应用地址
  },
]);

start();

跨子应用通信

Qiankun 提供了跨子应用通信机制，可以通过共享状态或发布订阅模式实现。例如，要在宿主应用程序中向 React.js 子应用程序发送消息：

// 宿主应用
const qiankun = window.__POWERED_BY_QIANKUN__;
qiankun.emitGlobalEvent('message', { data: 'Hello from host' });

在 React.js 子应用程序中接收消息：

// React.js 子应用
window.addEventListener('message', (event) => {
  if (event.data.type === 'message') {
    console.log('Received message from host:', event.data.data);
  }
});

优势和好处

将 Vue.js 和 React.js 集成到微前端架构中提供了以下优势：