一、一套微前端框架通常包含四个部分：

1.加载器（SystemJs，https://github.com/systemjs/systemjs）

2.包装器（singleSpa，https://single-spa.js.org/docs/getting-started-overview.html）

3.主应用

4.子应用

这里重点介绍一下，主应用，子应用的搭建过程，首先通过vue-cli创建2个vue应用，vue_main主应用，vue_child子应用

二、修改主应用vue_main

1. 修改index.html，在head部分添加以下代码：

<meta name="importmap-type" content="systemjs-importmap">
    <script type="systemjs-importmap">
    {
      "imports": {
      "child": "http://localhost:8081/app.js", // 确保文件浏览器中可以打开 
      "single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js",
      "vue": "https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js",
      "vue-router": "https://cdn.jsdelivr.net/npm/vue-router@3.0.7/dist/vue-router.min.js"
      }
    }
    </script>
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js" as="script" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/system.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/amd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/named-exports.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/named-register.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/use-default.min.js"></script>

2.修改app.html

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted () {
    window.System.import('single-spa').then((res) => {
      var singleSpa = res
      singleSpa.registerApplication('child', () => window.System.import('child'), location => true)
      singleSpa.start()
    })
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这样主应用就修改好了

三、修改子应用vue_child

1.安装项目依赖

npm i single-spa-vue systemjs-webpack-interop

2.修改入口文件main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import { setPublicPath } from 'systemjs-webpack-interop'
import Vue from 'vue'
import App from './App'
import singleSpaVue from 'single-spa-vue'
import router from './router'
setPublicPath('child')

Vue.config.productionTip = false

/* eslint-disable no-new */
// new Vue({
//   el: '#app',
//   router,
//   components: { App },
//   template: '<App/>'
// })

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    render: (h) => h(App),
    router
  }
})

export const bootstrap = vueLifecycles.bootstrap
export const mount = vueLifecycles.mount
export const unmount = vueLifecycles.unmount

3.修改webpack配置文件webpack.base.conf.js

  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    library:'child',  // 新添加
    libraryTarget: 'umd',  // 新添加
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

4.修改webpack配置文件webpack.dev.conf.js，确保子应用允许跨域

devServer: {
    headers:{
      "Access-Control-Allow-Origin":"*"
    }
}

四.运行项目查看效果，这样在主应用中加载了子应用的内容

五、通过脚手架生成子应用

npm init single-spa