qiankun 是一個基于 single-spa 的微前端實現(xiàn)庫，旨在幫助大家能更簡單、無痛的構(gòu)建一個生產(chǎn)可用微前端架構(gòu)系統(tǒng)。

主應(yīng)用改造

• 安裝qiankun.

npm i qiankun -S

*   ## 注冊子應(yīng)用并啟動

  *   ### 路由方式觸發(fā)加載

      *   在項目入口文件里注冊子應(yīng)用并啟動

         import { registerMicroApps, start } from 'qiankun';

              registerMicroApps([
                {
                  name: 'reactApp', // 子應(yīng)用名需唯一 指定為子應(yīng)用package.json 里的name值
                  entry: '//localhost:3000', // 子應(yīng)用線上地址
                  container: '#container', // 子應(yīng)用掛載容器id
                  activeRule: '/app-react', // 子應(yīng)用觸發(fā)規(guī)則 詳細介紹：https://qiankun.umijs.org/zh/cookbook
                  props:{} // 子應(yīng)用加載時需要傳遞的參數(shù)
                },
                {
                  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();
  *   ### 手動加載

      *   在對應(yīng)頁面的mounted方法里加載子應(yīng)用

           <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(); // 需自應(yīng)用在項目入口暴露此方法
                  },
                  updated(){
                      microApp.update({ updata: true }) // 需自應(yīng)用在項目入口暴露此方法
                  }
              }
              </script>
# 子應(yīng)用改造

*   ## VUE子應(yīng)用（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實例掛載前的各種方法（統(tǒng)一鑒權(quán)、監(jiān)控、獲取用戶信息等...）包在這里
            const { container } = props; // 為了避免根id #app與其他的DOM沖突，需要限制查找范圍
            router = new VueRouter({ // 關(guān)于路由模式的使用參考：https://qiankun.umijs.org/zh/cookbook 一般和主應(yīng)用路由模式保持一致
              base: window.__POWERED_BY_QIANKUN__ ? `/${name}/` : '/',
              mode: 'history',
              routes,
            });

            instance = new Vue({
              router,
              store,
              render: (h) => h(App),
            }).$mount(container ? container.querySelector('#app') : '#app'); // 限制查找范圍，是子應(yīng)用方式掛載時，掛載在父應(yīng)用的vue實例掛在節(jié)點上
          }

          // 獨立運行時
          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', // 把微應(yīng)用打包成 umd 庫格式
                jsonpFunction: `webpackJsonp_${name}`,
              },
            },
            // configureWebpack配置或者是這樣，根據(jù)項目里原有的配置選擇
            configureWebpack: (config) => {
              Object.assign(config.output, {
                library: `${name}-[name]`,
                libraryTarget: "umd", // 把微應(yīng)用打包成 umd 庫格式
                jsonpFunction: `webpackJsonp_${name}`,
              });
            }
          };

         

  *   ### 發(fā)布配置 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)