原理：

主利用某个div上面挂载的是子利用的html文件。

子利用注册：

首先，在finder中装置qiankun工具包。

npm i qiankun -S

而后，另起一个appRegister.js, 用于写子利用挂载。
子利用挂载次要用到了 qiankun 包中的 registerMicroApps 和 start 办法。上面是挂载微利用时的配置信息：

import { registerMicroApps, start, runAfterFirstMounted, initGlobalState } from "qiankun"//查看路由const checkMicroUrl = (location, urlList) => {  let url = location.hash.indexOf("?") != -1 ? location.hash.split("?")[0] : location.hash // 减少路由带query查问参数判断  const routerName = url.substring(2)  return urlList.includes(routerName)}const config = [{name: 'activity', entry: '//localhost:7100',container: '#subapp-viewport',activeRule: () => {    return checkMicroUrl(location, ['myActivity', 'ourActivity'])    },  }]registerMicroApps(  config,  {    beforeLoad: [      app => {              }    ],    beforeMount: [      app => {              }    ],    afterUnmount: [      app => {               }    ]  })/*** Step3 启动利用*/start()

接着，在finder的main.js文件中引入 appRegister.js

import './utils/appRegister.js'

子利用挂载：

找到挂载子利用的组件，加一个div，id是 subapp-viewport，用来挂载子利用

比方我的项目中，子利用挂载到home组件下：<template>  <div class="wrap-all">    <div class="wrapper">      <left-nav></left-nav>      <router-view v-if="!$route.meta.isMicroApp"></router-view>      <div v-show="$route.meta.isMicroApp" id="subapp-viewport"> </div>    </div>  </div></template>

主利用中路由：

{        path: '/myActivity', //匹配微利用跳转        name: 'activity',        component: import('@/components/home.vue'),        meta: {          isMicroApp: true        }      },

这样就配置好了主利用，当拜访的是https://test.kk.com/#/myActivity时，就会命中微利用，#subapp-viewport的div里就会渲染子利用

子利用配置：

从新创立一个空的vue我的项目，在其main.js顶部引入qiankun官网须要引入的public-path.js文件

if (window.__POWERED_BY_QIANKUN__) {  // eslint-disable-next-line no-undef  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;}

main.js中定义qiankun的mount钩子，渲染子利用

/*** 利用每次进入都会调用 mount 办法，通常咱们在这里触发利用的渲染办法*/export async function mount() {  render(props);}

子利用的是用vue-cli构建的，批改vue.config.js的configureWebpack项

  // 自定义webpack配置  configureWebpack: {    output: {      // 把子利用打包成 umd 库格局###       // const { name } = require('./package'); name是package.json中定义的      library: `${name}`,      libraryTarget: 'umd',      jsonpFunction: `webpackJsonp_${name}`,    },  },

以上是用qiankun挂载子利用后，本地开发的配置，前面会讲一下：
1，主利用和子利用如何传参
2，如何把qiankun公布到测试和生产环境
3，公布测试和生产时踩的坑