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 方式加载微应用时生效。

你可能感兴趣的:(前端,vue.js,javascript)