Vue3 + vite + ts + qiankun.js的实际应用

一、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()]
      })
    ]
  })
}

5. 子应用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();
    },
  });
}

6. 回到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启动项目啦。

开发环境首次加载子应用稍微有点慢，请耐心等待

最后项目中我封装了很多觉得还算可以的组件，哪里需要改进的麻烦大家指点江山。对你有帮助可以点点赞~