前言：
我这里的父级应用使用的是react工程，umi。下面两个例子vue2，vue3，作为微应用接入到基座所需调整
vue2项目
1: 安装vue-cli
使用vue create XXX(xxx是你的项目名称) 命令创建项目，安装的时候选择vue2
2：改造main.js：
子应用需要在自己的入口文件导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。
bootstrap：只会在子应用初始化的时候调用一次，下次子应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
mount：应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法。
unmount：应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载子应用的应用实例
// 声明一个变量，可以用于卸载
let instance = null
// 挂载到自己的html中，基座会拿到这个挂载后的html插入进去
function render(props = {
}) {
const {
container } = props
instance = new Vue({
router,
store,
render: h => h(App)
}).$mount(container ? container.querySelector('#app') : '#app')
}
// 独立运行
if (!window.__POWERED_BY_QIANKUN__) {
render()
}
// 子组件接入协议，必须暴露三个函数
export async function bootstrap(props) {
console.log('bootstrap函数：', props)
}
export async function mount(props) {
console.log('mount函数：', props)
render(props)
}
export async function unmount(props) {
console.log('unmount函数：', props)
instance.$destroy()
instance = null
}
AI 代码解读
3：配置文件vue.config.js
const {
defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack:{
output:{
// 输出暴露的名称,挂载到window上的名称
library:'vueApp',
// 打包格式
libraryTarget:'umd'
}
},
devServer:{
// 允许跨域
headers:{
'Access-Control-Allow-Origin':'*'
}
},
})
AI 代码解读
旧版本的webpack可能会报错defineConfig，可以去掉difineConfig(),只保留{
}中的内容，或者升级新版webpac
k
AI 代码解读
。
4：启动：
项目启动之后，将基座中注册的子应用地址改为你项目启动的地址。
vue3项目
1：安装新版vue-cli，
使用vue create XXX(xxx是你的项目名称) 命令创建项目，安装的时候选择vue3
2：改造main.js，按照图示
import {
createApp } from 'vue'
import {
createRouter,createWebHistory} from 'vue-router'
import App from './App.vue'
import routes from './router'
let app
let router
let history
function render(props = {
}){
history = createWebHistory('/vue')
router = createRouter({
history,
routes
})
app = createApp(App)
const {
container} = props
app.use(router).mount(container?container.querySelector('#app'):'#app')
}
if(!window.__POWERED_BY_QIANKUN__){
render()
}
// 子组件暴露三个函数
export async function bootstrap(props){
console.log('我是bootstrap项目函数',props);
}
export async function mount(props){
console.log('我是mount项目函数',props);
render(props)
}
export async function unmount(props){
console.log('我是vue项目unmount函数',props);
history = null
app = null
router = null
}
AI 代码解读
vue3不再new Vue了，而是使用createApp，注意和vue2有所区别
AI 代码解读
3：改造vue.config.js，按照图示：
const {
defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
publicPath:'http://localhost:8083',
configureWebpack:{
output:{
library:'vueApp',
libraryTarget:'umd'
}
},
devServer:{
port:8083,
headers:{
'Access-Control-Allow-Origin':'*'
}
},
})
AI 代码解读
publicPath中的port和devServer中port中保持一致，可以根据你的项目修改。
4：启动
项目启动之后，将基座中注册的子应用地址改为你项目启动的地址。
