qiankun微前端：qiankun+vite+vue3+ts（未完待续..）

目录

什么是微前端

目前现有的微前端

好处

使用

 子应用的页面在主应用里显示 

什么是微前端

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

 

我的理解就是将一个大型的前端应用拆分成多个模块，每个微前端模块可以由不同的团队进行管理，并可以自主选择框架，并且有自己的仓库，可以独立部署上线。

目前现有的微前端方案

iframe

通过iframe实现的话就是每个子应用通过iframe标签来嵌入到父应用中，iframe具有天然的隔离属性，各个子应用之间以及子应用和父应用之间都可以做到互不影响。

但是iframe也有很多缺点：

  1. url不同步，如果刷新页面，iframe中的页面的路由会丢失。
  2. 全局上下文完全隔离，内存变量不共享。
  3. UI不同步，比如iframe中的页面如果有带遮罩层的弹窗组件，则遮罩就不能覆盖整个浏览器，只能在iframe中生效。
  4. 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程
single-spa

single-spa是最早的微前端框架，可以兼容很多技术栈。

single-spa首先在基座中注册所有子应用的路由，当URL改变时就会去进行匹配，匹配到哪个子应用就会去加载对应的那个子应用。

相对于iframe的实现方案，single-spa中基座和各个子应用之间共享着一个全局上下文，并且不存在URL不同步和UI不同步的情况，但是single-spa也有以下的缺点：

  1. 没有实现js隔离和css隔离
  2. 需要修改大量的配置，包括基座和子应用的，不能开箱即用
qiankun

基于single-spa二次开发，封装了开箱即用的api

资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。

实现了样式隔离

基于qiankun的微前端实战

准备两个空项目

  • qiankun-base 主应用
  • qiankun-child vue 子应用
创建基座项目qiankun-base和qiankun-child-vue

创建一个vue3+vite+tsx项目详情见 创建一个vue3+vite+ts项目

vue子应用 qiankun-child-vue
修改.env
VITE_APP_NAME = qiankun-child-vue
修改根节点挂载id
index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>qiankun-child-vue</title>
  </head>
  <body>
    <div id="qiankun-child-vue"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

main.ts

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import router from "./router";
import antv from "ant-design-vue";
const app = createApp(App);
app.use(router).use(antv).mount("#qiankun-child-vue");

配置子应用菜单 

/views/index.tsx

import { defineComponent, h, reactive, ref } from "vue";
import { Menu, SubMenu, MenuItem, ItemType } from "ant-design-vue";
import "./index.css";
import { RouterView, useRouter } from "vue-router";
// 展平数组
const flattenMenu = (list) => {
  const res: any = [];
  if (!list) return;
  list.forEach((item) => {
    res.push(item);
    if (item.children) res.push(...flattenMenu(item.children));
  });
  return res;
};
const getMenuKey = (menuList, key) => {
  const allList = flattenMenu(JSON.parse(JSON.stringify(menuList)));
  const cur = allList.find((item) => item.key == key);
  return cur ? cur : {};
};

export default defineComponent({
  setup() {
    const router = useRouter();

    const menuList = ref([
      {
        key: "1",
        label: "子应用菜单",
        url: "/qiankun-child-vue",
        children: [
          { label: "设置", key: "2", url: "/qiankun-child-vue/setting" },
        ],
      },
    ]);
    // 找到点击的菜单对象
    const handleMenuSelect = (params) => {
      const menu = getMenuKey(menuList.value, params.key);
      router.push(menu.url);
    };
    return () => (
      <a-layout class="layout">
        <a-layout-sider>
          <Menu
            onSelect={handleMenuSelect}
            style="height:100%"
            mode="inline"
            items={menuList.value}
          ></Menu>
        </a-layout-sider>
        <a-layout-content>
          <RouterView></RouterView>
        </a-layout-content>
      </a-layout>
    );
  },
});

新建/views/setting.tsx

import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    return () => <div>设置</div>;
  },
});

配置路由 /router/index.ts

import { createRouter, createWebHashHistory } from "vue-router";
import Index from "@/views/index";
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      component: Index,
      children: [
        {
          path: "/qiankun-child-vue/setting",
          name: "setting",
          component: () => import("@/views/setting"),
        },
      ],
    },
  ],
});

export default router;

基本的页面就搭建好了 

基座 qiankun-base

同样在/views/index.tsx 写好基本的菜单

配置路由 /router/index.ts
import { createRouter, createWebHashHistory } from "vue-router";
import Index from "@/views";

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/:afterUser(.*)", // 正则匹配url 跳转不会报错
      component: Index,
    },
  ],
});

export default router;
配置vite.config.js   根路径base
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import { resolve } from "path";
export const pathResolve = (dir: string) => resolve(process.cwd(), ".", dir);

export default defineConfig(({ mode }) => {
  return {
    base: "/qiankun-base/",
    plugins: [vue(), vueJsx()],
    server: {
      host: "0.0.0.0",
      port: 1000,
    },
    resolve: {
      alias: {
        "@": pathResolve("src"),
      },
    },
  };
});

修改dom根节点 和主应用一样改为子应用的项目名称 改这个是为了主应用和子应用的挂载在根节点的id不会重复，如果一样的话会导致主应用页面渲染不出来子应用（这里不在展示细节）

qiankun配置步骤（上面还没开始）
主应用qiankun-base中下载qiankun
yarn add qiankun

在main.ts中开启 

注意:在挂载之前开启

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import { start } from "qiankun";
import router from "./router";
import antv from "ant-design-vue";
start({
  sandbox: {
    // strictStyleIsolation: true, // 开启严格的样式隔离模式
    experimentalStyleIsolation: true, // 开启后所有样式都会加上一个类名 .app-main {} 
 ===>  div[data-qiankun-react16] .app-main {}
  },
  singular: false, // 单一时间只渲染一个微应用，默认为true
});
createApp(App).use(router).use(antv).mount("#qiankun-base");
vue子应用 qiankun-child-vue
下载vite-plugin-qiankun插件
yarn add vite-plugin-qiankun
配置vite.config.js 使用vite-plugin-qiankun
import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import qiankun from "vite-plugin-qiankun";
import { resolve } from "path";

export const pathResolve = (dir: string) => resolve(process.cwd(), ".", dir);

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  return {
    base: mode == "production" ? `/${env.VITE_APP_NAME}/` : "",
    plugins: [
      vue(),
      vueJsx(),
      qiankun(env.VITE_APP_NAME, { useDevMode: true }),
    ],
    server: {
      host: "0.0.0.0",
      port: 2000,
    },
    resolve: {
      alias: {
        "@": pathResolve("src"),
      },
    },
  };
});
修改main.ts 判断是在主应用还是子应用中
import "./style.css";
import App from "./App.vue";
import router from "./router";
import antv from "ant-design-vue";
import { render } from "@/hooks/microApp";

render(App, "#qiankun-child-vue", (app, props) => {
  app.use(router).use(antv);
});

/hooks/microApp.ts

import renderWithQiankun, {
  QiankunProps,
  qiankunWindow,
} from "vite-plugin-qiankun/dist/helper";
import { App, Component, createApp } from "vue";

const isMicroApp = qiankunWindow.__POWERED_BY_QIANKUN__;
export const render = (
  AppRoot: Component,
  domId,
  configApp: (app: App, props?: QiankunProps) => any
) => {
  let app: App;
  const _render = (props: QiankunProps = {}) => {
    const { container } = props;
    const root: string | Element = container
      ? container.querySelector(domId)!
      : domId; // 避免 id 重复导致微应用挂载失败
    app = createApp(AppRoot);
    // 回调配置app的函数 让调用的地方 可以使用app
    configApp(app, props);
    app.mount(root);
  };
  const initQiankun = () => {
    renderWithQiankun({
      bootstrap() {
        // console.log("微应用：bootstrap");
      },
      mount(props) {
        // 获取主应用传入数据
        // console.log("微应用：mount", props);
        _render(props);
      },
      unmount(props) {
        // console.log("微应用：unmount", props);
        app.unmount();
      },
      update(props) {
        // console.log("微应用：update", props);
      },
    });
  };
  isMicroApp ? initQiankun() : _render();
};
在views/index.tsx 增加判断逻辑 是在主应用中还是在子应用中
import { qiankunWindow } from "vite-plugin-qiankun/dist/helper";
 
return () => {
// 判断如果在主应用中
      if (qiankunWindow.__POWERED_BY_QIANKUN__) {
        return <router-view></router-view>;
      }
// 在子应用中
      return (
        <a-layout class="layout">
          <a-layout-sider>
            <Menu
              onSelect={handleMenuSelect}
              style="height:100%"
              mode="inline"
              items={menuList.value}
            ></Menu>
          </a-layout-sider>
          <a-layout-content>
            <RouterView></RouterView>
          </a-layout-content>
        </a-layout>
      );
 };
易错点

1.主应用和子应用挂载在根节点的domid是同一个

2.主应用配置路径和子应用路径不一致

       

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/757959.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

大淘客api实现多多进宝的商品查询PHP版

大淘客api实现多多进宝的商品查询PHP版

大家好&#xff0c;我是网创有方&#xff0c;今天教大家如何使用大淘客的api实现拼多多商品详情信息查询。这里用到的多多进宝&#xff0c;如果没有多多进宝的&#xff0c;先去多多进宝注册个账号吧&#xff01; 第一步&#xff1a;进入大淘客官方创建应用&#xff0c;并且下载…
阅读更多...
AI降重新突破：chatgpt降重工具在学术论文中的应用与效果

AI降重新突破：chatgpt降重工具在学术论文中的应用与效果

论文降重一直是困扰各界毕业生的“拦路虎”&#xff0c;还不容易熬过修改的苦&#xff0c;又要迎来降重的痛。 其实想要给论文降重达标&#xff0c;我有一些独家秘诀。话不多说直接上干货&#xff01; 1、同义词改写&#xff08;针对整段整句重复&#xff09; 这是最靠谱也是…
阅读更多...
.NET C# 使用OpenCV实现人脸识别

.NET C# 使用OpenCV实现人脸识别

.NET C# 使用OpenCV实现模型训练、人脸识别 码图~~~ 1 引入依赖 OpenCvSHarp4 - 4.10.0.20240616 OpenCvSHarp4.runtime.win - 4.10.0.20240616 2 人脸数据存储结构 runtime directory | face | {id}_{name} | *.jpg id - 不可重复 name - 人名 *.jpg - 人脸照片3 Demo 3.…
阅读更多...
stable-diffusion-webui-colab搭建SadTalker由图生成视频人

stable-diffusion-webui-colab搭建SadTalker由图生成视频人

在这里选择一个stable-diffusion-webui-colab ​​​​​​​​​GitHub - camenduru/stable-diffusion-webui-colab: stable diffusion webui colab 这里我选择是&#xff1a; https://colab.research.google.com/github/camenduru/stable-diffusion-webui-colab/blob/main…
阅读更多...
Webpack: 深入理解图像加载原理与最佳实践

Webpack: 深入理解图像加载原理与最佳实践

概述 图形图像资源是当代 Web 应用的最常用、实惠的内容、装饰元素之一&#xff0c;但在 Webpack 出现之前对图像资源的处理复杂度特别高&#xff0c;需要借助一系列工具(甚至 Photoshop)完成压缩、雪碧图、hash、部署等操作。 而在 Webpack 中&#xff0c;图像以及其它多媒体…
阅读更多...
JAVA课程复习

JAVA课程复习

简答题65分（理解）❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀看本章小结 读程序写结果45分 填空102分（lambda） 编程310分（20~30行） ❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀-❀ 1~13章，11、13章重…
阅读更多...
小时候的子弹击中了现在的我-hive进阶：案例解析（第18天）

小时候的子弹击中了现在的我-hive进阶：案例解析（第18天）

系列文章目录 一、Hive表操作 二、数据导入和导出 三、分区表 四、官方文档&#xff08;了解&#xff09; 五、分桶表&#xff08;熟悉&#xff09; 六、复杂类型&#xff08;熟悉&#xff09; 七、Hive乱码解决&#xff08;操作。可以不做&#xff0c;不影响&#xff09; 八、…
阅读更多...
Lr、LrC软件下载安装 Adobe Lightroom专业摄影后期处理软件安装包分享

Lr、LrC软件下载安装 Adobe Lightroom专业摄影后期处理软件安装包分享

Adobe Lightroom它不仅为摄影师们提供了一个强大的照片管理平台&#xff0c;更以其出色的后期处理功能&#xff0c;成为了摄影爱好者们争相追捧的必备工具。 在这款软件中&#xff0c;摄影师们可以轻松地管理自己的照片库&#xff0c;无论是按拍摄日期、主题还是其他自定义标签…
阅读更多...
【JVM基础篇】垃圾回收

【JVM基础篇】垃圾回收

文章目录 垃圾回收常见内存管理方式手动回收&#xff1a;C内存管理自动回收(GC)&#xff1a;Java内存管理自动、手动回收优缺点 应用场景垃圾回收器需要对哪些部分内存进行回收&#xff1f;不需要垃圾回收器回收需要垃圾回收器回收 方法区的回收代码测试手动调用垃圾回收方法Sy…
阅读更多...
Python | Leetcode Python题解之第206题反转链表

Python | Leetcode Python题解之第206题反转链表

题目&#xff1a; 题解&#xff1a; # Definition for singly-linked list. # class ListNode: # def __init__(self, val0, nextNone): # self.val val # self.next next class Solution:def reverseList(self, head: Optional[ListNode]) -> Optio…
阅读更多...
QT事件处理及实例（鼠标事件、键盘事件、事件过滤）

QT事件处理及实例（鼠标事件、键盘事件、事件过滤）

这篇文章通过鼠标事件、键盘事件和事件过滤的三个实例介绍事件处理的实现。 鼠标事件及实例 鼠标事件包括鼠标的移动、按下、松开、单击和双击等。 创建一个MouseEvent项目&#xff0c;通过项目介绍如何获得和处理鼠标事件。程序效果如下图所示。 界面布局代码如下&#xff…
阅读更多...
后端之路第三站(Mybatis)——入门配置

后端之路第三站(Mybatis)——入门配置

一、Mybatis是啥&#xff1f; 就是一个用java来操控数据库的框架语言 之前学的datagrip或者navicat这些软件里我们操作数据库&#xff0c;原理是我们编写完的操作语句发送到服务器传送到数据库系统&#xff0c;然后数据库执行完之后再发送给服务器返回给datagrip或者navicat显…
阅读更多...
独立开发者系列（13）——示例理解面向对象与过程

独立开发者系列（13）——示例理解面向对象与过程

专业术语晦涩难懂&#xff0c;特别是当你没有写过稍微大点的系统的时候&#xff0c;你要理解这里面的区别很难。 从最简单的早期我们学习开始&#xff0c;我们除了练习hello world掌握了入门函数之后&#xff0c;基本都再练习算法。比如水仙花数的获取&#xff0c;冒泡排序&…
阅读更多...
phpMyAdmin | mysqli::real_connect(): (HY000/2002): No such file or directory

phpMyAdmin | mysqli::real_connect(): (HY000/2002): No such file or directory

法一&#xff1a;第一次安装宝塔 第一次安装宝塔mysql服务是默认关闭的&#xff0c;需要手动打开&#xff0c;打开服务再次进入phpMyAdmin发现可以进入了 法二&#xff1a;第一种方法没解决用这种 出现mysqli::real_connect(): (HY000/2002): No such file or directory错误通…
阅读更多...
Java | Leetcode Java题解之第206题反转链表

Java | Leetcode Java题解之第206题反转链表

题目&#xff1a; 题解&#xff1a; class Solution {public ListNode reverseList(ListNode head) {if (head null || head.next null) {return head;}ListNode newHead reverseList(head.next);head.next.next head;head.next null;return newHead;} }
阅读更多...
ROS2自定义接口Python实现机器人移动

ROS2自定义接口Python实现机器人移动

1.创建机器人节点接口 cd chapt3_ws/ ros2 pkg create example_interfaces_rclpy --build-type ament_python --dependencies rclpy example_ros2_interfaces --destination-directory src --node-name example_interfaces_robot_02 --maintainer-name "Joe Chen" …
阅读更多...
20240630 每日AI必读资讯

20240630 每日AI必读资讯

&#x1f4da;全美TOP 5机器学习博士发帖吐槽&#xff1a;实验室H100数量为0&#xff01; - 普林斯顿、哈佛「GPU豪门」&#xff0c;手上的H100至少三四百块&#xff0c;然而绝大多数ML博士一块H100都用不上 - 年轻的研究者们纷纷自曝自己所在学校或公司的GPU情况&#xff1a…
阅读更多...
vue开发网站--关于window.print()调取打印

vue开发网站--关于window.print()调取打印

1.vue点击按钮调取打印 点击按钮&#xff1a; 调取打印该页面&#xff1a; <div click"clickDown()">下载</div>methods: {//下载-调取打印clickDown() {window.print()}, }<style>/* 点击打印的样式 */media print {.clickDown {display: no…
阅读更多...
【测试】软件测试规程（word原件）

【测试】软件测试规程（word原件）

软件测试规程的作用在于确保软件测试活动的系统性、规范性和一致性。它明确了测试的目标、范围、方法、流程以及所需资源&#xff0c;为测试人员提供了明确的指导和操作规范。通过遵循测试规程&#xff0c;可以提高测试效率&#xff0c;减少测试遗漏和错误&#xff0c;保证软件…
阅读更多...
K8S基础简介

K8S基础简介

用于自动部署&#xff0c;扩展和管理容器化应用程序的开源系统。 功能&#xff1a; 服务发现和负载均衡&#xff1b; 存储编排&#xff1b; 自动部署和回滚&#xff1b; 自动二进制打包&#xff1b; 自我修复&#xff1b; 密钥与配置管理&#xff1b; 1. K8S组件 主从方式架…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站