一、qiankunjs的核心思想
随着单页面spa应用的不断升级和流行，很多大型应用变得越来越难以维护，因此衍生出了很多的微前端技术，当然qiankunjs也是其中之一，其核心思想也就是把多个单页面子应用通过全局的window方式在主应用中进行js注册。
这样说你可能更能理解一点，我的主应用和子应用是两个项目，子应用是主应用的一部分，我的主应用在a.com,我的子应用b.com是另外一个单独的项目，但是我通过配置，在访问a.com的时候会去加载注入b.com打包的js文件
二、在vue3中如何使用qiankunjs
1 配置应用
新建一个文件夹qiankun 文件夹下新建main 与 qiankun-a文件夹 分别存放主应用与子应用
qiankun目录下是自己封装的一个自动安装器与启动器，主要内容在main与qiankun-a问价夹下
2. 配置main
在main.js引入子项目
3. 使用的地方插入子应用入口
4. 子应用vite配置
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
// 乾坤
import qiankun from "vite-plugin-qiankun";
// https://vitejs.dev/config/
export default ({ mode }) => {
console.log('子应用判断环境地址--------->', mode)
return defineConfig({
base: mode === 'development' ? 'http://localhost:8081/' : '/flow-graph/',
server: {
port: 8081,
cors: true,
origin: "http://localhost:8081",
headers: {
"Access-Control-Allow-Origin": "*",
},
},
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
"@img": fileURLToPath(new URL("./src/assets/imgs", import.meta.url)),
},
},
plugins: [
vue(),
qiankun("flow", {
useDevMode: true,
}),
// antDesign 按需加载
Components({
resolvers: [AntDesignVueResolver()]
})
]
})
}
- 子应用main.ts配置
import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"
import { renderWithQiankun, qiankunWindow } from "vite-plugin-qiankun/dist/helper"
import "normalize.css";
import "./styles/main.scss";
import ElementPlus from "element-plus";
import "element-plus/theme-chalk/src/index.scss";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import { store } from "@/stores";
import { useGetMicro } from '@/hooks/useGetParams'
// const useGetMicro = useGetMicro()
// 处理接收到的父容器传递过来的值
const storeChange = async (props: { [x: string]: any }): Promise<void> => {
props.onGlobalStateChange &&
// props.onGlobalStateChange()方法就是用来监听主应用传值，value就是我们在主应用中action.js中初始化的对象值，每当主应用中调用setGlobalState()方法改变值的时候，在这里都可以监听到最新的值
(await props.onGlobalStateChange(async (value: any) => {
useGetMicro().setAsyncParams(value)
}, true))
}
let app: any;
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
createApp(App).use(router).mount("#app");
} else {
renderWithQiankun({
mount(props) {
// 传递的值可以获取到了
storeChange(props)
app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component);
}
app.use(ElementPlus);
app.use(router)
app.use(store)
app.mount(
props.container
? props.container.querySelector("#app")
: document.getElementById("app")
);
},
bootstrap() {
console.log("--bootstrap");
},
update(props) {
console.log("--update", props);
},
unmount() {
console.log("--unmount");
app?.unmount();
},
});
}
- 回到qiankun文件夹下正常 yarn serve 启动就可以啦
三、qiankun.js微前端后端管理系统模板介绍
本人自己搭建了一个简单的无内容后端管理系统，主应用Vue3.0 + vite + pinia 子应用 Vue3.2 + ts + vite + pinia
在这里插入图片描述
git clone 地址
https://gitee.com/zypzzz/vue3-qiankun-template
clone到本地后先运行yarn or npm i 安装启动器依赖
接着运行yarn install-all 安装所有子内容的依赖
成功后就可以运行yarn serve启动项目啦。
开发环境首次加载子应用稍微有点慢，请耐心等待