基于 1、qiankun+vue elementui admin 2、qiankun+React antd admin 3、qiankun+…… 的微前端应用改造

使用技术栈qiankun将vue-elment-admin框架打造为微前端基座处理。
本项目文件目录包含：micro-main 是主要项目、micro-con 是子项目。

本文使用的是 qiankun2.0 之后的版本和方法，底层使用vue-elment-admin、详细描述可查看上方连接。

	$npm install  全局注入
	$npm install tmvc-base  全局注入基座依赖文件 //本地如果已有包含qiankun的应用可直接执行此命令
	$npm install qiankun 
	

导入子应用配置文件至src目录下： 
在将将下载后的文件microRouter文件夹复制到项目中的src目录下

在src/layout/components/AppMain.vue
加入以下：
<section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>
    <!-- 挂载子应用 开始 -->
    <section id="Appmicro" />
    <!-- 挂载子应用 结束 -->
  </section>

在src/router/index.js添加以下配置：
$ import startQiankun from 'tmvc-base'// 注入乾坤基座配置
// 调用qiankun启动服务
startQiankun()

创建在 src/router/modules/微应用路由名称
在将文件注入到 src/router/index.js当中。

在基座配置子项目文件当中路径为：src/microRouter.js
文件内容的name与activeRule的名称必须一致例子如以下：
{
    name: 'vue-son', //微应用名称
    entry: VUE_SON_APP,//微应用服务地址
    container: '#Appmicro',//基座id
    activeRule: '/vue-son'//访问名称，注意必须和微应用名称相同
  },

路径为：src/modules/vue-son-menu.js
对应的基座当中设置的微应用名称，微应用路由配置必须与配置的microRouter.js当中的“name“对应起来，可参考以下例子：
const appRouter = {
  path: '/vue-con',
  component: Layout,
  redirect: 'doc1',
  name: 'vue-con',
  meta: {
    title: '微·子系统2',
    icon: 'table'
  },
  children: [
    {
      path: '/vue-son',
      children: [
        {
          path: 'dashboard',
          name: 'Dashboard',
          meta: { title: '子应用·测试页面4', icon: 'menuSon' }
        }
      ]
    },
    {
      path: '/vue-son/form',
      children: [
        {
          path: 'form',
          name: 'Form',
          meta: { title: '子应用·测试页面5', icon: 'menuSon' }
        }
      ]
    }
  ]
}
export default appRouter

微应用例子是以目前主流的框架vue-elment-admin框架为主，基于qiankun底层的微前端框架，进行了生命周期、通讯、依赖等一系列封装，方便维护及快速注入到微应用，仅供参考。详细框架介绍可参考前言篇里内容。

	$npm install  全局注入
	$npm install tmvc  全局注入微应用依赖文件

// 微前端配置文件注入
import tmvc from 'tmvc'
// name 导出微应用生命周期
const { bootstrap, mount, unmount } = tmvc.microMain()
export { bootstrap, mount, unmount }

// 微前端子项目配置注入
const { microConfig, headers } = require('./src/microApp/micro-config.js')
module.exports.devServer.headers = headers// 配置跨域 必须
module.exports.configureWebpack.output = microConfig// umd格式注入 必须module.exports.publicPath = `//localhost:${port}`// 端口号配置 不是必须设置

isMicroApp: window.__POWERED_BY_QIANKUN__// 配置微前端菜单显示与否

<div  v-if="!isMicroApp" :class="classObj" class="app-wrapper">
    <div  v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div :class="{hasTagsView:needTagsView}" class="main-container" >
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
        <tags-view v-if="needTagsView" />
      </div>
      <app-main />
      <right-panel v-if="showSettings">
        <settings />
      </right-panel>
    </div>
  </div>
  <app-main v-else />