TvT.js
目录
主题颜色

主应用 - admin

主应用不限技术栈，只需要提供一个容器 DOM，然后注册微应用并 start 即可。此实践使用的是早几年比较火的vue2的vue-element-admin，基本复合了大家对后台大型老项目的描述了，大家可以先到它的官网下载它的原始版本github:vue-element-adminopen in new window

介绍章节提供的是已集成tvt的admin，改造后完成态源码: vue-element-admin-qiankunopen in new window

TIP

主应用预览地址: cos.icegl.cnopen in new window

主要改造步骤

安装 qiankun ：

yarn add qiankun # 或者 npm i qiankun -S

main.js 初始化 :

在src/main.js中增加了：

import { initQiankun } from './qiankuncom/init.js'
initQiankun()	// 初始化微应用

src/qiankuncom/init.js对应的代码如下：

import { registerMicroApps, start } from 'qiankun'

// 第一个微应用为普通的vue子应用 、 第二个微应用为 TvT.js
const microApps = [
  {
    name: 'qiankun-child', // 子应用的名称
    entry:
      process.env.NODE_ENV === 'development'
        ? '//localhost:8081/' 						// '//localhost:8081/'
        : 'https://cos.icegl.cn/qiankun/micro/',	// 子应用的域名
    container: '#AppmicroALL',// 承载子应用的容器，src/layout/components/AppMain.vue中定义
    activeRule: '/vue-son' 						// 被激活的子应用的路由
  },
  {
    name: 'TvT.js', // 子应用的名称
    entry:
      process.env.NODE_ENV === 'development'
        ? '//localhost:8000/' 						// '//localhost:8000/'
        : 'https://cos.icegl.cn/qiankun/tvt/',	// 子应用的域名
    container: '#AppmicroALL',// 承载子应用的容器，src/layout/components/AppMain.vue中定义
    activeRule: '/TvT.js'							// 被激活的子应用的路由
  }
]
export const initQiankun = () => {
  registerMicroApps(microApps)
  window.qiankunStarted = false
}
export const startQiankun = () => {
  if (!window.qiankunStarted) {
    start({ strictStyleIsolation: true })
    window.qiankunStarted = true
  }
}

路由增加配置 :

WARNING

官方推荐所有跳转都是用 history.pushState() 的方式

在src/layout/components/AppMain.vue中增加了：

<template>
    <div id="AppmicroALL" />
</template>

在src/router/index.js中增加了：

import microAppRouter from '../qiankuncom/microAppRouter'
import tvtRouter from '../qiankuncom/tvtRouter'

export const asyncRoutes = [
	tvtRouter,
	microAppRouter,
  	......
]

src/qiankuncom/tvtRouter.js对应的代码如下：

function goto(to, from, next, microPath) {
  const targetPath = to.fullPath.includes('#')
    ? to.fullPath
    : `${to.fullPath}#/${microPath}`
  window.history.replaceState(null, '', targetPath)
  next()
}
const tvtRouter = {
  path: '/TvT.js',
  component: Layout,
  redirect: { name: 'TvTtheBasic' },
  name: 'TvT.js',
  meta: {
    title: '嵌入TvT.js子系统',
    icon: 'el-icon-ice-cream-round'
  },
  children: [
    {
      path: 'theBasic',
      component: () => import('@/views/Micro/tvt'),
      name: 'TvTtheBasic',
      meta: { title: '简单实例', icon: 'el-icon-check', noCache: false, isMicro: true, microPath: 'plugins/qiankunTvt/theBasic' },
      beforeEnter: (to, from, next) => { goto(to, from, next, 'plugins/qiankunTvt/theBasic') }
    },
    {
      path: 'events',
      component: () => import('@/views/Micro/tvt'),
      name: 'TvTevents',
      meta: { title: '通讯实例', icon: 'el-icon-loading', noCache: false, isMicro: true, microPath: 'plugins/qiankunTvt/events' },
      beforeEnter: (to, from, next) => { goto(to, from, next, 'plugins/qiankunTvt/events') },
      props: { showButton: true }
    },
    {
      path: 'other',
      component: () => import('@/views/Micro/tvt'),
      name: 'TvTother',
      meta: { title: '其他场景移植', icon: 'international', noCache: false, isMicro: true, microPath: 'plugins/qiankunTvt/other' },
      beforeEnter: (to, from, next) => { goto(to, from, next, 'plugins/qiankunTvt/other') }
    }
  ]
}

src/views/Micro/tvt.vue对应的代码如下：

import { startQiankun } from '../../qiankuncom/init.js'
export default {
	......
	mounted() {
    	startQiankun()
  	},
	......
}

TIP

  • goto() 函数是路由跳转的辅助函数，用于将路由跳转的参数转换为微应用路由跳转的参数
  • microPath 是微应用路由的参数，用于微应用路由跳转
  • @/views/Micro/tvt 为 子应用页面的外框架vue组件文件
  • startQiankun() 函数是微应用初始化的辅助函数，在子应用页面外框架组件的mounted() 函数中调用，用于微应用初始化
  • 本章节只展示了嵌入tvt.js的微应用的配置方式，关于qiankun-child的子应用，方法一样，可以在src/qiankuncom/microAppRouter.js、src/views/Micro/index.vue文件中查看
  • 其余样式以及按钮跳转的小问题，详见vue-element-admin-qiankunopen in new window 地虎降天龙的修改最后提交的部分
本页目录