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

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 = '';
}

根据是否是在 qiankun 中判断是否直接渲染应用。
导出生命周期钩子方法,这些方法会在微应用加载/卸载时被主应用调用。

这样微应用的配置也完成了。

启动和测试

我们可以分别启动两个项目,访问主应用,然后根据路由规则验证是否可以成功加载微应用。

一个简单的基于 qiankun + vue 的微前端框架就搭建完成了。