vue3.0 创建 乾坤qiankun 微前端

1.前期准备工作
1.1 创建主应用
1) vue 新建主应用

vue create qiankun-main

2) 创建src/components/father.vue

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

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
{
path: '/',
// redirect 是重定向， 当在 app.vue 点击跳转到父页面 盒子后，路由 配置 /，而  path: '/'设置了重定向
// 重定向最终跳到了 path: '/father' 页面，而path: '/father'页面的组件是 father 页面
redirect: '/Father'
},
{
path: '/father',
name: 'Father',
component: () => import(/* webpackChunkName: "about" */ '@/components/father.vue')
}
]

// 3. 创建路由实例
const router = createRouter({
// 4. 采用hash 模式
// history: createWebHashHistory(),
// 采用 history 模式
history: createWebHistory(),
routes, // short for `routes: routes`
});

export default router

4) 在main.js中引入路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router';

createApp(App)
.use(router)
.mount('#base-app');

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

1. app.vue

2. index.html

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

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
transpileDependencies: true,
devServer: {
// 可以在配置中 配置端口 VUE_APP_PORT = 8080
port: 8080,
headers: {
'Access-Control-Allow-Origin': '*' // 重点1: 允许跨域访问子应用页面
}
},
})

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

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

 

1.2 创建子应用
  1) 新建子应用

vue create qiankun-vue-child

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

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

import {createRouter, createWebHistory} from 'vue-router'

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

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



export default router

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

import { createApp } from 'vue'
import App from './App.vue'
import router from './router';

function render (props = {}) {
const { container } = props
createApp(App)
.use(router)
.mount(container ? container.querySelector('#app') : '#app'); // 为了避免根id#app与其他DOM冲突，需要限制查找范围
}

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

const { defineConfig } = require('@vue/cli-service')
const packageName = require('./package.json').name;

module.exports = defineConfig({
transpileDependencies: true,
devServer: {
port: 8083, // 重点6
headers: { // 重点7：同重点1，允许子应用跨域
'Access-Control-Allow-Origin': '*'
}
},

// 自定义webpack配置

configureWebpack: {
output: {
library: `${packageName}-[name]`,
libraryTarget: 'umd', // 把子应用打包成 umd 库格式

//  jsonpFunction: `webpackJsonp_${packageName}`
chunkLoadingGlobal: `webpackJsonp_${packageName}`
}
}
})

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

  2.乾坤简单配置步骤
  2.1 主应用配置
1) 安装乾坤

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

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

import { registerMicroApps, start } from 'qiankun'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router';


import { registerMicroApps, start } from 'qiankun'

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

createApp(App)
.use(router)
.mount('#base-app');

3) 主应用可以给子应用传值。 通过props传递

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

4) 子应用可以在 main.js 文件夹中的生命周期函数通过props接收数据

/**
* bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
* 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
*/
export async function bootstrap() {
console.log('react app bootstraped');
}

/**
* 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
*/
export async function mount(props) {
// ReactDOM.render(, props.container ? props.container.querySelector('#root') : document.getElementById('root'));

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

/**
* 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
*/
export async function unmount() {
console.log('现在进入子应用的unmount周期', props)
}


/**
* 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
*/
export async function update(props) {
console.log('update props', props);
}

2.2 子应用qiankun的配置

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

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

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

import { createApp } from 'vue'
import App from './App.vue'
import router from './router';

function render (props = {}) {
const { container } = props
createApp(App)
.use(router)
.mount(container ? container.querySelector('#app') : '#app'); // 为了避免根id#app与其他DOM冲突，需要限制查找范围
}

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


/**
* bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
* 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
*/
export async function bootstrap() {
console.log('react app bootstraped');
}

/**
* 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
*/
export async function mount(props) {
// ReactDOM.render(, props.container ? props.container.querySelector('#root') : document.getElementById('root'));

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

/**
* 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
*/
export async function unmount() {

}


/**
* 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
*/
export async function update(props) {
console.log('update props', props);
}

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

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