微前端qiankun

引言

本文采用 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 =><