超详细qiankun微前端入门指南：小白也能轻松搞定！

2023-09-15 23:05:18

qiankun：构建微前端应用的入门指南

简介

随着软件应用程序变得越来越复杂，将大型单体应用拆分为更小的独立模块已成为一种常见做法。微前端架构应运而生，它允许开发人员将单体应用分解为更小的、可复用的微应用。qiankun 是一个流行的微前端框架，它简化了微应用的创建和管理。本教程将指导您使用 qiankun 构建一个微前端应用。

安装 qiankun

首先，使用 npm 或 yarn 在您的项目中安装 qiankun：

npm install --save qiankun

配置主应用

在主应用的入口文件中，配置 qiankun：

import { createApp } from 'vue';
import qiankun from 'qiankun';

const app = createApp({});

qiankun.register({
  name: 'sub-app',
  entry: '//localhost:3001',
  container: '#subapp-container',
  activeRule: '/subapp'
});

app.mount('#app');

name: 微应用的名称。
entry: 微应用的入口文件路径。
container: 微应用将在其中渲染的容器元素。
activeRule: 激活微应用的路由规则。

开发微应用

使用您喜欢的框架或库（如 Vue.js）开发您的微应用：

import { createApp } from 'vue';
import qiankun from 'qiankun';

const app = createApp({});

qiankun.registerMicroApps([
  {
    name: 'sub-app',
    entry: '//localhost:3001',
    container: '#subapp-container',
    activeRule: '/subapp'
  }
]);

app.mount('#app');

通信

主应用和微应用之间可以通过 qiankun 提供的 qiankun.send 和 qiankun.on 方法进行通信：

// 主应用发送消息
qiankun.send('sub-app', {
  type: 'message',
  data: 'Hello from main app!'
});

// 微应用接收消息
qiankun.on('message', (data) => {
  console.log(data);
});