乾坤-vue应用实例

1.前期准备工作

1.1 创建主应用

  1) vue 新建主应用

vue create qiankun-main

  2) 创建src/components/father.vue

<template>
     <div>我是father</div>
</template>

<script>
export default {
  name: 'Father'
}
</script>
<style scoped>

</style>

  3) src/router/index.js中添加路由信息

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/father'
  },
  {
    path: '/father',
    name: 'Father',
    component: () => import(/* webpackChunkName: "about" */ '@/components/Father')
  }

]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

  4) 在main.js中引入路由

new Vue({
  router,
  render: h => h(App)
}).$mount('#base-app')

  app.vue和index.html 里面根id也要是base-app
  1. app.vue

<template>
  <div class="app" id="base-app">
  </div>
</template>

  2. index.html

  <div id="base-app"></div>

  5) 在项目根目录下新建vue.config.js，添加内容如下

module.exports = {
  devServer: {
    port: 8085,
    headers: {
      'Access-Control-Allow-Origin': '*' // 重点1: 允许跨域访问子应用页面
    }
  }
}

  6) 修改app.vue中的内容，如下：

<template>
  <div class="app" id="base-app">
    <span><router-link to="/">点击跳转到父页面</router-link></span>
    <span><router-link to="/vue">点击跳转到子页面</router-link></span>
    <router-view />
    <div id="vue"></div><!-- 重点2：子应用容器 id -->
  </div>
</template>

  7) 测试：运行程序后，浏览器打开本地http://localhost:8085/father，能成功显示father.vue页面的内容。结果如下：

1.2 创建子应用

  1) 新建子应用

vue create qiankun-vue-child

  2) 创建src/components/child.vue，内容如下：

<template>
  <div >
    我是子页面
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: {
    msg: String
  }
}
</script>
<style scoped>

</style>

  3) src/router/index.js中添加路由信息，内容如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import '../public-path'
Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/child' },
  { path: '/child', component: () => import('../components/Child') }
]

const router = new VueRouter({
  // 有些时候我们希望直接启动微应用从而更方便的开发调试，你可以使用这个全局变量来区分当前是否运行在 qiankun 的主应用的上下文中
  base: window.__POWERED_BY_QIANKUN__ ? '/vue' : '/', // 重点4
  mode: 'history', // 重点5
  routes
})

export default router

  4）在main.js中引入路由，内容如下：

import router from "./router"
Vue.use(Router)
new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

  5）在项目根目录下新建vue.config.js，添加内容如下：

const { name } = require('./package')
module.exports = {
  devServer: {
    port: 8083, // 重点6
    headers: { // 重点7：同重点1，允许子应用跨域
      'Access-Control-Allow-Origin': '*'
    }
  },
  // 自定义webpack配置
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把子应用打包成 umd 库格式
      jsonpFunction: `webpackJsonp_${name}`
    }
  }
}

  6）修改app.vue中的内容，如下：

<template>
  <div class="app">
    我是子应用
    <router-view/>
  </div>
</template>

  7）测试：运行程序后，浏览器打开本地http://localhost:8083/child，能成功显示child.vue页面的内容。结果如下：

2.乾坤简单配置步骤

2.1 主应用配置

  1) 安装乾坤

$ yarn add qiankun # 或者 npm i qiankun -S

  2) 在主应用入口文件src/main.js中注册子应用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { registerMicroApps, start } from 'qiankun'
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#base-app')

// 在主应用中注册子应用
registerMicroApps([{
  name: 'vue app',
  entry: '//localhost:8083', // 重点8：对应重点6
  container: '#vue', // 重点9：对应重点2
  activeRule: '/vue', // 重点10：对应重点4
  props: {
    data: 'child子应用'
  }
}]
)
// 启动
start()

  3) 主应用可以给子应用传值。

  通过props传递

registerMicroApps([{
  name: 'vue app',
  entry: '//localhost:8083', // 重点8：对应重点6
  container: '#vue', // 重点9：对应重点2
  activeRule: '/vue', // 重点10：对应重点4
  props: {
    data: 'child子应用'
  }
}]

  子应用可以在生命周期函数通过props接收数据

export async function bootstrap (props) {
  console.log('data bootstrap', props)
}
export async function mount (props) {
  console.log('乾坤子应用容器加载完成，开始渲染 child')
  console.log('props from main mount', props)
  render(props)
}

2.2 子应用配置

  1) 在src目录新增public-path.js，内容如下：

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

  2) 在main.js中配置如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

let instance = null
function render (props = {}) {
  const { container } = props
  instance = new Vue({
    router,
    render: h => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app') // 为了避免根id#app与其他DOM冲突，需要限制查找范围
}

if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

export async function bootstrap (props) {
  console.log('data bootstrap', props)
}
export async function mount (props) {
  console.log('乾坤子应用容器加载完成，开始渲染 child')
  console.log('props from main mount', props)
  render(props)
}
export async function unmount () {
  instance.$destroy()
  instance.$el.innerHTML = ''
  instance = null
}

说明：子应用的四个周期函数：

bootstrap：bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
mount：应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法。
unmount：应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例。
update：可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效。