【qiankun乾坤】从0到1搭建微前端-编程知识

【qiankun乾坤】从0到1搭建微前端

微前端是一种将一个大型单体应用拆分成多个小型应用的架构方式。它可以让不同的团队独立开发部署自己的应用,同时这些应用可以集成到一个统一的底座应用中,对用户来说就是一个完整的应用。

qiankun 是阿里开源的一个微前端实现框架,可以帮助我们比较容易地实现微前端架构。
在这里插入图片描述

下面来介绍如何从0到1使用 qiankun + vue 搭建一个微前端框架。

准备工作

首先我们需要创建两个独立的 vue 项目,一个是主应用 shell,一个是微应用 app1。
两个项目使用 vue-cli 分别初始化,并安装 qiankun

shell

vue create micro-frontend-shell
cd micro-frontend-shell
npm install qiankun # 或 yarn add qiankun

app1

vue create micro-frontend-app1
cd micro-frontend-app1
npm install qiankun # 或 yarn add qiankun

配置主应用

在主应用 shell 中,我们需要设置一些基础的 qiankun 配置。

// main.js
import { registerMicroApps,start 
} from 'qiankun';registerMicroApps([{name: 'app1',entry: '//localhost:8080',container: '#container',activeRule: '/app1'}
]);start();

registerMicroApps 注册微应用的基本信息,包括名称、入口、挂载元素、激活规则等。start 方法启动 qiankun。
然后在 App.vue 中添加微应用的容器:

<!-- App.vue -->  
<div id="container"></div>

此时主应用的基础配置已经完成。

配置微应用

在 app1 中,我们需要做一些适配,让它可以作为微应用被主应用加载:

// main.js
import { createApp } from 'vue';
import App from './App.vue';let app = null;function render() {app = createApp(App);app.mount('#app'); 
}// 独立运行时直接渲染应用
if (!window.__POWERED_BY_QIANKUN__) {render();
}export async function bootstrap() {console.log('react app bootstrap');
}export async function mount(props) {console.log('props from main framework', props);render(props);  
}export async function unmount() {app.unmount();app._container.innerHTML = '';
}