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