微前端（一）-父子应用

背景：一种类似于微服务的架构，它将微服务的理念应用于浏览器端，适用于巨石应用拆分为多个小型系统、多个单体应用整合等应用场景，并且各个前端应用可以独立运行、独立开发、独立部署。

主应用

主应用为基座，接入所有子应用

配置

注册所有子应用

子应用

配置

需要在入口暴露生命周期接口

let instance = null;

const render = (props = {}) => {
  const { container, routerBase } = props;
  // eslint-disable-next-line
  router.base =  window.__POWERED_BY_QIANKUN__ ? routerBase : process.env.BASE_URL;
  router.mode = 'history';
  instance = new Vue({
    render: (h) => h(App),
    router,
    store,
  }).$mount(container ? container.querySelector('#app') : '#app');
};

// eslint-disable-next-line
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}

export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}

export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}