qiankun微前端框架入门及使用教程

BUG高级开发工程师

2024-01-10 485 阅读1分钟

简介

qiankun 是一个基于 single-spa 的微前端框架，用于构建主应用与子应用之间的通信和协同开发。本文将介绍 qiankun 的基本概念和使用方法。

准备工作

在开始之前，确保你已经安装了 Node.js 和 npm。另外，你需要创建两个项目：主应用和子应用。

创建主应用

使用 Vue CLI 创建一个新的 Vue 项目：
```
vue create main-app
```
安装 qiankun 依赖：
```
cd main-app
npm install qiankun --save
```

在 src/main.js 文件中添加以下代码，注册子应用：

import { registerMicroApps, start } from 'qiankun';

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

start();

在主应用的页面中添加容器元素，用于加载子应用：
```
<div id="subapp-container"></div>
```
启动主应用：
```
npm run serve
```

创建子应用

使用 Vue CLI 创建一个新的 Vue 项目：
```
vue create sub-app
```
安装 qiankun 依赖：
```
cd sub-app
npm install qiankun --save
```

在 src/main.js 文件中添加以下代码，导出生命周期函数和渲染方法：

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

export async function bootstrap() {
  console.log('Sub app bootstraped');
}

export async function mount(props) {
  console.log('Sub app mounted', props);
  new Vue({
    render: h => h(App),
  }).$mount('#app');
}

export async function unmount() {
  console.log('Sub app unmounted');
}

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

启动子应用：
```
npm run serve
```

运行应用

在主应用中访问子应用：打开浏览器并访问 http://localhost:8080/sub-app，即可看到主应用加载了子应用。
子应用间通信：在主应用中使用 props 参数将数据传递给子应用，子应用可以通过 props 对象接收到数据并进行处理。