qiankun 入门（react和vue）

一、umi使用qiankun 插件

使用方式

一、主站

1.安装插件

yarn add qiankun # 或者 npm i qiankun -S

2.配置qiankun开启

2.1注册子应用

a. 插件构建时配置子应用

umirc.ts
   qiankun: {
    master: {
      // 注册子应用信息
      apps: [
        {
          name: 'app1', // 唯一 id
          entry: '//localhost:7001', // html entry
        },
        {
          name: 'app2', // 唯一 id
          entry: '//localhost:7002', // html entry
        },
      ],
    },
  },  

b. 运行时动态配置

// 从接口中获取子应用配置，export出的qiankun变量是一个promise
 export const qiankun = fetch('/config').then(({apps}) => ({
   // 注册子应用信息
   apps,
   lifeCyles: {
      afterMount: (props) => {
         console.log(props)
      }
   }
 }))

2.2 装载子应用

a. 使用路由绑定,路由注册时绑定

routes: [
  {
    path:"/",
    component:'@/pages/index'
  },
  {
   path:'app1',
   microApp:'app1',
   props:{
     name:'x',
     age:1
   }
  }
]

b. 使用 组件的方式

import { MicroApp } from 'umi';

export function MyPage() {

  return (
    <div>
      <div>
       <MicroApp name="app1" />
      </div>
    </div>
  )
}

子应用的配置

1、插件注册

config.ts
  
   qiankunL:{
     slave:{}
   }

注意: pageage.json 的name与注册id保持一致

二、vue使用qiankun

1.安装

yarn add qiankun # 或者 npm i qiankun -S

2.注册阶段

2.1主应用注册路由信息

import {registerMicroApps, start} from 'qiakun'
 ....
 
 registerMicroApps(apps,config)
  apps为子应用注册路由信息
  apps= [
    {
    name: 'react app', // app name registered
    entry: '//localhost:7100',
    container: '#yourContainer',
    activeRule: '/yourActiveRule',
  },
  {
    name: 'vue app',
    entry: { scripts: ['//localhost:7100/main.js'] },
    container: '#yourContainer2',
    activeRule: '/yourActiveRule2',
  }
  ]
  config 为注册的qiankun 生命周期

2.2 子应用

a.子应用需要在入口处(main)抛出相关事件

export async function bootstrap() {
  console.log('react app bootstraped');
}

/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
  ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
}

/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount(props) {
  ReactDOM.unmountComponentAtNode(
    props.container ? props.container.querySelector('#root') : document.getElementById('root'),
  );
}

/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) {
  console.log('update props', props);
}

b. 在vue.config.js

const port = 9010

module.exports: {
  devServer: {
    port,
    headers: {
      "Access-Control-Allow-Origin":'*'
    }
  },
  configureWebpack: {
    output: {
      library: 'child',
      libraryTarget: 'umd',
    }
  }
}

子应用必须支持跨域，由于qiankun是通过fetch去获取子应用的引入的静态资源的，所以必须要求静态资源支持跨域

c、 router/index.js

const router = new VueRoute({
  mode:' history',
  base:'/child01',
  routes
})

3、使用阶段

1、直接使用，调用相关路由

2、手动加载

<template>
  <div class="microApp">
    <div ref="child1"></div>
  </div>
</template>

<script>
import { loadMicroApp } from 'qiankun';
export default {
  name: 'microApp',

  data () {
    return {
      microApp: null
    }
  },

  mounted () {
    this.microApp = loadMicroApp({ name: '子应用child01', container: this.$refs.child1, entry: 'http://localhost:9010' });
    
  },
  beforeDestroy () {
    this.microApp.unmount();
  }
}
</script>