教程的例子：主應(yīng)用（angular cli項(xiàng)目）、子應(yīng)用（vue cli項(xiàng)目）

第一步：創(chuàng)建angular cli環(huán)境，創(chuàng)建angular項(xiàng)目，安裝qiankun

npm install -g @angular/cli //創(chuàng)建angular環(huán)境
ng new angular-app //創(chuàng)建angular項(xiàng)目
npm i qiankun --save //安裝qiankun

第二步：創(chuàng)建vue cli環(huán)境，創(chuàng)建vue項(xiàng)目，安裝qiankun

npm install -g @vue/cli //創(chuàng)建vue環(huán)境
vue create vue-app //創(chuàng)建vue項(xiàng)目
npm i qiankun --save //安裝qiankun

第三步：在angular項(xiàng)目中創(chuàng)建掛載子應(yīng)用的頁面，并配置路由，在vue-page.component.html中添加主應(yīng)用掛載的元素

//在angular項(xiàng)目中創(chuàng)建掛載子應(yīng)用的頁面
ng g component views/vue-page //在views下創(chuàng)建vue-page組件

//并配置路由
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { VuePageComponent } from './views/vue-page/vue-page.component';
const routes: Routes = [
  {
    path:'home',
    component: VuePageComponent 
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

//在vue-page.component.html中添加主應(yīng)用掛載的元素
<div id="container"></div>

第四步：在angular項(xiàng)目下main.ts添加子應(yīng)用

import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
  {
    name: "vueChildOne",
    entry: "http://localhost:8080", //子應(yīng)用的請求地址
    container: "#container", //掛載到主應(yīng)用的哪個(gè)元素下
    activeRule: "/vue-app", //路由地址為//vue-app時(shí)，把//localhost:8080這個(gè)應(yīng)用掛載  到#container的元素下
  }
]);
start();

第五步：在 vue項(xiàng)目中的src 目錄新增 public-path.js文件，并添加以下代碼：

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

第六步：在vue項(xiàng)目添加幾個(gè)頁面并配置在路由，在項(xiàng)目中創(chuàng)建創(chuàng)建router目錄再創(chuàng)建index.js

const route = [
    {
      path:'/',redirect: "/system-config/users"
    },
    {
      path:'/vue-app',redirect: "system-config/users"  //vue-app與主應(yīng)用中activeRule的一致
    },
    {
      path: '/system-config',
      name: 'SystemConfig',
      component: () => import('../layout/LayoutIndex.vue'),
      children:[
        {
          path:"users",
          name:"Users",
          component:() => import('../views/systemConfig/UserInfo.vue')
        },
        {
          path:"roles",
          name:"Roles",
          component:() => import('../views/systemConfig/RoleInfo.vue')
        }
      ]
    },
    {
      path: '/tag',
      name: 'Tag',
      component: () => import('../layout/LayoutIndex.vue'),
      children:[
        {
          path:"application",
          name:"ApplicationTag",
          component:() => import('../views/airTag/ApplicationTag.vue')
        },
        {
          path:"material",
          name:"MaterialTag",
          component:() => import('../views/airTag/MaterialTag.vue')
        }
      ]
    }
]

第七步：在vue項(xiàng)目中的main.js，添加以下代碼，導(dǎo)出相應(yīng)的生命周期鉤子

import './public-path';
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import routes from './router';
// import store from './store';

Vue.config.productionTip = false;

let router = null;
let instance = null;
function render(props = {}) {
  const { container } = props;
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/vue-app' : '/',
    mode: 'history',
    routes,
  });

  instance = new Vue({
    router,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}

// 獨(dú)立運(yùn)行時(shí)
if (!window.__POWERED_BY_QIANKUN__) {
  console.log(window.__POWERED_BY_QIANKUN__,'xxx')
  render();
}

export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
  console.log(window.__POWERED_BY_QIANKUN__,'xxx')
  console.log('[vue] props from main framework', props);
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  router = null;
}

第八步：配置微應(yīng)用的打包工具，在vue項(xiàng)目中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 庫格式
      chunkLoadingGlobal: `webpackJsonp_${name}`
    },
  },
};

第九步：測試

npm run serve //運(yùn)行vue項(xiàng)目

ng serve -o //運(yùn)行angular項(xiàng)目

在瀏覽器輸入/vue-app