微前端qiankun详细使用教程

教程的例子：主应用（angular cli项目）、子应用（vue cli项目）

第一步：创建angular cli环境，创建angular项目，安装qiankun

npm install -g @angular/cli //创建angular环境
ng new angular-app //创建angular项目
npm i qiankun --save //安装qiankun

第二步：创建vue cli环境，创建vue项目，安装qiankun

npm install -g @vue/cli //创建vue环境
vue create vue-app //创建vue项目
npm i qiankun --save //安装qiankun

第三步：在angular项目中创建挂载子应用的页面，并配置路由，在vue-page.component.html中添加主应用挂载的元素

//在angular项目中创建挂载子应用的页面
ng g component views/vue-page //在views下创建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中添加主应用挂载的元素
<div id="container"></div>

第四步：在angular项目下main.ts添加子应用

import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
  {
    name: "vueChildOne",
    entry: "//localhost:8080", //子应用的请求地址
    container: "#container", //挂载到主应用的哪个元素下
    activeRule: "/vue-app", //路由地址为//vue-app时，把//localhost:8080这个应用挂载  到#container的元素下
  }
]);
start();

第五步：在 vue项目中的src 目录新增 public-path.js文件，并添加以下代码：

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

第六步：在vue项目添加几个页面并配置在路由，在项目中创建创建router目录再创建index.js

const route = [
    {
      path:'/',redirect: "/system-config/users"
    },
    {
      path:'/vue-app',redirect: "system-config/users"  //vue-app与主应用中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项目中的main.js，添加以下代码，导出相应的生命周期钩子

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');
}

// 独立运行时
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;
}

第八步：配置微应用的打包工具，在vue项目中vue.config.js文件中添加以下代码：

const { name } = require('./package');
module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack:{
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      chunkLoadingGlobal: `webpackJsonp_${name}`
    },
  },
};

第九步：测试

npm run serve //运行vue项目

ng serve -o //运行angular项目

在浏览器输入/vue-app