qiankun简单的引用子组件实例。

前言：父子应用均采用vue cli进行处理。
父应用安装乾坤依赖。如果需要乾坤根据路由进行子应用加载的。可以根据官方把乾坤配置到main.js入口文件上。这里直接手动引入

父组件业务代码：

<template>
  <div>
    <div id="qiankun_parent">qiankun-parent</div>
    <div id="qiankun_son1" style="height:100px; width:100%"/>
  </div>
</template>

<script>

import { loadMicroApp } from 'qiankun';
export default {
  name: 'App',
  setup(){
    // 引入子应用，挂载到qiankun_son1
    loadMicroApp({
      name: 'qiankun_son1',
      entry: '//localhost:8087',
      container: '#qiankun_son1',
    });
  },
  components: {
  }
} 
</script>

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

子应用不需要安装乾坤依赖，只需要向外抛出三个生命周期函数，处理跨域问题，处理webpack打包配置。

子组件main.js：

import "./public-path"
import { createApp } from 'vue'
import App from './App.vue'

// eslint-disable-next-line no-undef
console.log('判断是否使用了乾坤的变量:',window.__POWERED_BY_QIANKUN__);

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

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

/** 
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount() {
  console.log('unmount');
}
/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
 export async function update(props) {
  console.log('update props', props);
}

console.log('create qiankun-son1 App');
createApp(App).mount('#qiankun_son1_app')

子组件vue.config.js：

// const { defineConfig } = require('@vue/cli-service')
const {name} = require('./package');

module.exports = {
  // transpileDependencies: true,
  devServer:{
    // 配置端口
    port:8087,
    // 配置跨域
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  // 配置webpack
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd',
    },
  },
}