案例使用base(vue)作为基地，qiankun-vue作为插入组件，qiankun-React作为第二个插件

    1. 分别创建三个组件

    创建基座qiankun-base
    image.png
    创建qiankun-vue
    image.png
    创建qiankun-react
    image.png
    2.在基座中全局安装qiankun

    1. $ yarn add qiankun # 或者 npm i qiankun -S

    3.在qiankun-base中注册并且开启配置

    1. //App.vue
    2. <template>
    3.   <div>
    4.       <!--基座可以放自己的路由-->
    5.       <router-link to="/">Home</router-link>
    6.       <router-link to="/vue">Vue应用</router-link>
    7.       <router-link to="/react">React应用</router-link>
    8.       <!--三者有可能不可以同时显示后期需要加判断-->
    9.       <!--用于默认切换-->
    10.       <router-view></router-view>
    11.       <!--用于切换Vue-->
    12.       <div id="vue"></div>
    13.       <!--用于切换React-->
    14.       <div id="react"></div>
    15.   </div>
    16. </template>
    18. <style>
    19. #app {
    20.   font-family: Avenir, Helvetica, Arial, sans-serif;
    21.   -webkit-font-smoothing: antialiased;
    22.   -moz-osx-font-smoothing: grayscale;
    23.   text-align: center;
    24.   color: #2c3e50;
    25. }
    27. #nav {
    28.   padding: 30px;
    29. }
    31. #nav a {
    32.   font-weight: bold;
    33.   color: #2c3e50;
    34. }
    36. #nav a.router-link-exact-active {
    37.   color: #42b983;
    38. }
    39. </style>

    main.js

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

Vue.config.productionTip = false
// 基座的书写规则
import {registerMicroApps,start} from 'qiankun' //注册并开启应用
const  apps = [
  {
    name:'vueapp', //应用的命名
    entry:'//localhost:10000', //默认会加载这个html 解析里面的js动态执行（子应用必须支持跨域） fetch
    container:'#vue', //应用对应的容器
    activeRule:'/vue' //应用所对应的规则
  },{
    name:'reactapp', //应用的命名
    entry:'//localhost:20000', //默认会加载这个html 解析里面的js动态执行（子应用必须支持跨域） fetch
    container:'#react', //应用对应的容器
    activeRule:'/react' //应用所对应的规则
  }
]
registerMicroApps(apps,{

});
start(); // 有API可以取消预加载


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

    4.在另一个文件qiankun-vue中进行配置

    1. 现在router/index中配置路径 ```javascript //router/index.js import Vue from ‘vue’ import VueRouter from ‘vue-router’ import Home from ‘../views/Home.vue’

    Vue.use(VueRouter)

    const routes = [ { path: ‘/‘, name: ‘Home’, component: Home }, { path: ‘/about’, name: ‘About’, // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/ webpackChunkName: “about” / ‘../views/About.vue’) } ]

    const router = new VueRouter({ mode: ‘history’, // 模式 base: ‘/vue’, // 基路径 routes })

    export default router

    
2. main.js配置生命周期并打包
```javascript
import  '../public-path' //动态映入public_PATH
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

// 应用打包成类库
let instance = null
function render(){
  instance = new Vue({
    router,
    render: h => h(App)
  }).$mount('#app')
  // 这里#app是挂载到自己的html中 基座会拿到挂在后的html然后插入到html中去
}


// 独立运行微应用
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

//启动的时候
export async function bootstrap(props){
  console.log(props)
}
// 挂载的时候
export async function mount(props){
  render(props)
}
// 卸载的时候
export async function unmount(props){
  console.log(props)
  instance.$destroy()
}
    1. 配置eslint，防止public-path的报错
      //eslintrc.js
"globals": {
 "__webpack_public_path__": "writable"
}