(二)微前端实战-CFANZ编程社区

1. 项目搭建

首先启动两个 vue-cli 应用：vue-cli-child、vue-cli-parent

我们需要父应用加载子应用，子应用需要暴露 3个方法：bootstrap、mount、unmount

使用 single-spa 子应用需要下载 npm 包 single-spa-vue，3个方法可以通过这个包引入然后使用

single-spa 监听 url 的变化，当 window.location.href 匹配到 url 时，开始走对应子 App 的这一套生命周期

2. vue-cli 代码接入微前端步骤安装步骤

子应用安装

cnpm i single-spa-vue

子应用 main.js 代码改造


import Vue from 'vue'
import App from './App'
import router from './router'
// 引入 single-spa-vue
import singleSpaVue from 'single-spa-vue'
Vue.config.productionTip = false

const appOptions = {
  el: '#child', // 挂载到哪个父应用的标签上 不是app了
  router,
  render: h => h(App)
}

// 通过插件拿到方法
const vueLifeCycle = singleSpaVue({
  Vue,
  appOptions
})

// 暴露出去 方便挂载到window
export const bootstrap = vueLifeCycle.bootstrap
export const mount = vueLifeCycle.mount
export const unmount = vueLifeCycle.unmount
export const update = vueLifeCycle.update

single-spa-vue 会帮忙生成这 4个方法，如果了解原理也可以自己写

这里需要把 singleApp 挂载到 window 上，umd 是挂载到全局浏览器中是 window

以便父应用获取

于是在子应用中我们可以看到window上有singleApp

3. 父应用安装 single-spa

cnpm i single-spa

代码改造：

<template>
  <div id="app">
    <router-link to="/child">加载vue子应用</router-link>
    <!-- 子应用加载位置 -->
    <div id="child"></div>
  </div>
</template>

<script>
export default {
}
</script>

<style scoped>

</style>

加载子应用的封装方法，注意需要是 promise

async function loadScript (src) {
  return new Promise((resolve, reject) => {
    var script = document.createElement('script')
    script.src = src
    // onload事件在资源被加载完成后会被触发
    script.onload = resolve
    script.onerror = reject
    document.body.appendChild(script)
  })
}

export default loadScript

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './rouer'
import { registerApplication, start } from 'single-spa'
import loadScript from './loadScript'

Vue.config.productionTip = false

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

// 需要传递参数
registerApplication(
  'singleApp', // 子应用名字随便写 叫啥都行 一个标识
  async () => { // 一个 promise 函数 命中时触发
    // 加载子应用的js 子应用有几个加载几个
    await loadScript('http://localhost:8082/app.js')
    return window.singleApp // 需要返回 bootstrap, mount, unmount 这3个方法
  },
  location => { // 当什么时候触发该子应用 一个触发的函数
    console.log(location, 'location---')
    return location.pathname === '/child'
  },
  { // 一个传递给子应用的对象 用来传参数
    a: 1,
    b: 2
  }
)

start()

点击加载子应用前：

点击加载子应用后，匹配到了url，加载子应用app.js

已经渲染出来了在 id 为 child 的位置~ over