微前端框架 Qiankun 的基本使用指南

2024-01-16 14:24:43

微前端是一种新的架构模式，它允许将单体前端应用程序拆分为更小、更可管理的模块。这些模块可以在不同的团队或组织中独立开发和部署，从而提高开发效率和敏捷性。而 Qiankun 是一个流行的微前端框架，它提供了一套完整的工具和 API，用于构建和管理微前端应用程序。

在本文中，我们将介绍 Qiankun 的基本使用方法，包括：

Qiankun 的安装

首先，我们需要在项目中安装 Qiankun：

npm install --saveqiankun

创建主应用

接下来，我们需要创建一个主应用，它将作为微前端应用程序的入口。在 main.js 文件中，我们可以初始化 Qiankun 并注册微前端模块：

import { createApp, registerMicroApps, start } from 'qiankun';

const app = createApp();

registerMicroApps([
  {
    name: 'app1', // 微前端模块的名称
    entry: '//localhost:7100', // 微前端模块的入口地址
    container: '#app1', // 微前端模块挂载的容器元素的 ID
  },
  {
    name: 'app2',
    entry: '//localhost:7200',
    container: '#app2',
  },
]);

start();

创建微前端模块

接下来，我们需要创建微前端模块。在每个微前端模块的入口文件中，我们需要导出一个 Vue 或 React 组件，并使用 Qiankun 提供的 API 将组件注册到微前端框架中：

// app1.js
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

export async function bootstrap(props) {
  console.log('bootstrap', props);
}

export async function mount(props) {
  console.log('mount', props);
}

export async function unmount(props) {
  console.log('unmount', props);
}