（五）微前端之框架

1. 官方学习文档

乾坤是在 single-spa 的基础上进行的封装 上手简单 官网：介绍 - qiankun

代码实战：快速上手 - qiankun

2. 项目实战

基座项目（主应用）：Vue

微应用（子应用）：2个 -- Vue 、原生 html 页面

由于 qiankun 是通过 fetch 去获取微应用的引入的静态资源的，所以必须要求这些静态资源支持跨域

主应用：

import Vue from 'vue'
import App from './App.vue'
import router from './router.js'
// 在主应用中注册微应用
import { registerMicroApps, start } from 'qiankun'

Vue.config.productionTip = false

// 当微应用信息注册完之后，一旦浏览器的 url 发生变化 (微应用与路由相关)
// 便会自动触发 qiankun 的匹配逻辑
// 所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子
registerMicroApps([
  {
    name: 'htmlChild',
    entry: '//localhost:8082',  // 加载这个 html 解析里面的 js 所以子应用必须要支持跨域
    container: '#html',
    activeRule: '/html',
    props: {
      name: 'zfb'
    }
  },
  {
    name: 'vueChild',
    entry: '//localhost:8081',
    container: '#vue',
    activeRule: '/vue',
    // 主应用给子应用传参数
    props: {
      name: 'zfb'
    }
  },
])

// 启动
start()

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

App.vue

子应用：

import Vue from 'vue'
import App from './App.vue'
import router from './router.js'

Vue.config.productionTip = false

let instance = null
function render (props = {}) {
  const { container } = props // 修改查找范围
  instance = new Vue({
    router,
    render: h => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app') // 挂载到微应用自己的app中，基座会拿到挂载后的html 将页面插入对应的 container 进去
}

// 独立运行微应用
// 有些时候我们希望直接启动微应用从而更方便的开发调试，你可以使用这个全局变量来区分当前是否运行在 qiankun 的主应用的上下文中
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

// 注入 publicPath
if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

/**
 * 微应用需要在自己的入口 js (通常就是你配置的 webpack 的 entry js) 导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用
 * 可以不写函数里面的逻辑 但是这3个方法必须存在
 */

/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap() {
  console.log('bootstrap', 'props-----')
}

/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
  console.log(props, 'props-----')
  render(props)
}

/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount() {
  instance.$destroy()
}

/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) {
  console.log('update props', props);
}

vue.config.js

module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*', // 支持跨域
    }
  },
  configureWebpack: {
    output: {
      library: 'vueChild', // 需要与主应用的name对应上
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
    }
  }
}

// 把 3 个方法挂载到 window.vueChild 上

html 文件：

  
  
  
  


  
html page
  

 本地用 http-server 启动