qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

主应用改造

• 安装qiankun.

npm i qiankun -S

*   ## 注册子应用并启动

  *   ### 路由方式触发加载

      *   在项目入口文件里注册子应用并启动

         import { registerMicroApps, start } from 'qiankun';

              registerMicroApps([
                {
                  name: 'reactApp', // 子应用名需唯一 指定为子应用package.json 里的name值
                  entry: '//localhost:3000', // 子应用线上地址
                  container: '#container', // 子应用挂载容器id
                  activeRule: '/app-react', // 子应用触发规则 详细介绍：https://qiankun.umijs.org/zh/cookbook
                  props:{} // 子应用加载时需要传递的参数
                },
                {
                  name: 'vueApp',
                  entry: '//localhost:8080',
                  container: '#container',
                  activeRule: '/app-vue',
                },
                {
                  name: 'angularApp',
                  entry: '//localhost:4200',
                  container: '#container',
                  activeRule: '/app-angular',
                },
              ]);
              // 在项目挂载完毕后启动 qiankun 
              // new VUE({el:'#app'})
              start();
  *   ### 手动加载

      *   在对应页面的mounted方法里加载子应用

           <script>
              import { loadMicroApp } from 'qiankun';
              let microApp = null;
              export default {
                  mounted(){
                      microApp = loadMicroApp({
                          name: 'app1',
                          entry: '//localhost:1234',
                          container: '#container',
                          props: { brand: 'qiankun' },
                      });

                  },
                  beforeDestory(){
                      microApp.unmount(); // 需自应用在项目入口暴露此方法
                  },
                  updated(){
                      microApp.update({ updata: true }) // 需自应用在项目入口暴露此方法
                  }
              }
              </script>
# 子应用改造

*   ## VUE子应用（vue-cli 3+ 生成的vue 2.x项目）

  *   ### main.js改造

      *   import Vue from 'vue';
          import VueRouter from 'vue-router';
          import App from './App.vue';
          import routes from './router';
          import store from './store';
          const { name } = require('./package');

          if (window.__POWERED_BY_QIANKUN__) {
            __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
          }
          let router = null
          let instance = null
          function render(props = {}) {
            // 将原来的vue实例挂载前的各种方法（统一鉴权、监控、获取用户信息等...）包在这里
            const { container } = props; // 为了避免根id #app与其他的DOM冲突，需要限制查找范围
            router = new VueRouter({ // 关于路由模式的使用参考：https://qiankun.umijs.org/zh/cookbook 一般和主应用路由模式保持一致
              base: window.__POWERED_BY_QIANKUN__ ? `/${name}/` : '/',
              mode: 'history',
              routes,
            });

            instance = new Vue({
              router,
              store,
              render: (h) => h(App),
            }).$mount(container ? container.querySelector('#app') : '#app'); // 限制查找范围，是子应用方式挂载时，挂载在父应用的vue实例挂在节点上
          }

          // 独立运行时
          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;
            router = null;
          }
          export async function update(props){
            console.log('vue app update',props)
          }

  *   ### vue.config.js 打包配置修改

      *  const { name } = require('./package');
          module.exports = {
            devServer: {
              headers: {
                'Access-Control-Allow-Origin': '*',
              },
            },
            configureWebpack: {
              output: {
                library: `${name}-[name]`,
                libraryTarget: 'umd', // 把微应用打包成 umd 库格式
                jsonpFunction: `webpackJsonp_${name}`,
              },
            },
            // configureWebpack配置或者是这样，根据项目里原有的配置选择
            configureWebpack: (config) => {
              Object.assign(config.output, {
                library: `${name}-[name]`,
                libraryTarget: "umd", // 把微应用打包成 umd 库格式
                jsonpFunction: `webpackJsonp_${name}`,
              });
            }
          };

         

  *   ### 发布配置 default.conf

      * add_header Access-Control-Allow-Origin *;
          add_header Access-Control-Allow-Methods *; 
          add_header Access-Control-Allow-Headers *;
# 常见问题官方解答

> [常见问题](https://qiankun.umijs.org/zh/faq)