乾坤-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' : '/', // 重点4mode: 'history', // 重点5routes
})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, // 重点6headers: { // 重点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 = falsenew Vue({router,render: h => h(App)
}).$mount('#base-app')// 在主应用中注册子应用
registerMicroApps([{name: 'vue app',entry: '//localhost:8083', // 重点8：对应重点6container: '#vue', // 重点9：对应重点2activeRule: '/vue', // 重点10：对应重点4props: {data: 'child子应用'}
}]
)
// 启动
start()

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

通过props传递

registerMicroApps([{name: 'vue app',entry: '//localhost:8083', // 重点8：对应重点6container: '#vue', // 重点9：对应重点2activeRule: '/vue', // 重点10：对应重点4props: {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 = falselet instance = null
function render (props = {}) {const { container } = propsinstance = 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 方式加载微应用时生效。