Qiankun 微应用（Vue.js）集成到基座：详尽指南

2023-11-21 05:45:26

微前端架构：将 Vue.js 微应用集成到 React/Umi 基座

简介

在当今微服务风靡的时代，微前端架构凭借其模块化和可重用性优势而备受瞩目。作为一款流行的微前端库，Qiankun 使开发人员能够轻松地将不同框架（如 Vue.js 和 React）构建的应用程序集成到一个单一的基座中。本文将指导您如何将基于 Vue.js 的微应用集成到 React/Umi 基座，从而构建可扩展、可维护且性能优异的微前端应用程序。

集成步骤

要将 Vue.js 微应用集成到 React/Umi 基座，您需要执行以下步骤：

1. 安装 Qiankun

在基座和微应用中安装 Qiankun 库：

# 对于基座
yarn add @qiankun/cli @qiankun/umi

# 对于微应用
yarn add @qiankun/vue

2. 配置基座

在基座的 config/config.ts 文件中，添加以下配置：

export default defineConfig({
  plugins: [
    // ...其他插件
    createQiankun({
      apps: [
        {
          name: 'vueApp', // 微应用名称
          entry: '//localhost:7100', // 微应用入口
        },
      ],
    }),
  ],
  qiankun: {
    // ...其他 Qiankun 配置
  },
});

3. 配置微应用

在微应用的 main.js 文件中，添加以下配置：

import { createApp } from 'vue'
import App from './App.vue'

let instance = null;

function render(props = {}) {
  instance = createApp(App).mount(props.container);
}

if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}

export async function mount(props) {
  render(props);
  console.log('[vue] vue app mounted');
}

export async function unmount() {
  instance.unmount();
  instance = null;
  console.log('[vue] vue app unmounted');
}

4. 跨应用通信

为了实现微应用与基座之间的通信，可以使用 qiankun.useStore 钩子函数：

import { useStore } from '@qiankun/store'

// 基座
const store = useStore()
store.setGlobalState({ name: 'qiankun' })

// 微应用
const store = useStore()
const name = store.getGlobalState('name')
console.log(name) // 输出：qiankun