引言
本文采用 Vue 作为主应用基座,接入不同技术栈(react和vue)的微应用
项目根目录下有基座main和其他子应用sub-vue,sub-react,搭建后的初始目录结构如下:
├── common //公共模块
├── main // 基座
├── sub-react // react子应用
└── sub-vue // vue子应用
构建主应用基座
我们先使用 vue-cli 生成一个 Vue 的项目,初始化主应用。
将普通的项目改造成 qiankun 主应用基座,需要进行三步操作:
创建微应用容器 - 用于承载微应用,渲染显示微应用;
注册微应用 - 设置微应用激活条件,微应用地址等等;
启动 qiankun;
1)创建微应用容器
我们先在主应用中创建微应用的承载容器,这个容器规定了微应用的显示区域,微应用将在该容器内渲染并显示。
// main/main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
2)注册微应用
在main.js中注册微应用,为了方便管理,我们将微应用的配置都放在:main/src/micro-app.js
下
import store from './store'
/**
* name: 微应用名称 - 具有唯一性
* entry: 微应用入口 - 通过该地址加载微应用
* container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上
* activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用
*/
const microApps = [
{
name: 'sub-vue',
entry: process.env.VUE_APP_SUB_VUE,
activeRule: '/sub-vue'
},
{
name: 'sub-react',
entry: process.env.VUE_APP_SUB_REACT,
activeRule: '/sub-react'
}
]
const apps = microApps.map(item => {
return {
...item,
container: '#subapp-viewport', // 子应用挂载的div
props: {
routerBase: item.activeRule, // 下发基础路由
getGlobalState: store.getGlobalState // 下发getGlobalState方法
}
}
})
export default apps
在构建好了主框架后,我们需要使用 qiankun 的 registerMicroApps
方法注册微应用
import Vue from 'vue'
import App from './App.vue'
import {
registerMicroApps, start, setDefaultMountApp } from 'qiankun'
import apps from './micro-app'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
registerMicroApps(apps, {
beforeLoad: app => {
// 加载微应用前,加载进度条
NProgress.start()
console.log('before load app.name====>>>>>', app.name)
},
beforeMount: [
app =><