（二）微前端实战

1. 项目搭建

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

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

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

single-spa 仅仅是一个子应用生命周期的调度者

single-spa 为应用定义了 boostrap, load, mount, unmount 四个生命周期回调

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 vueLife