微前端基础知识入门篇(二)

server/2024/11/27 7:47:21/

概述

在上一篇介绍了一些微前端的基础知识,详见微前端基础知识入门篇(一)。本文主要介绍qiankun前端框架的实战入门内容。

qiankun_3">qiankun前端实践

通过Vite脚手架分别创建三个程序,主应用A为:vite+vue3+ts,两个微应用分别为Bvite+vue3+ts;C:vite+React+ts。因为qiankun的微应用是技术无关性,因此微应用可以是一个简单网页html,也可以是任意前端框架搭建的一个网页应用。

三个应用分别安装qiankun库,终端运行如下命令:

yarn add qiankun
微应用的注册

在主应用A中程序入口文件src/main.ts中注册微应用如下:

import { createApp } from "vue";
import { registerMicroApps, start } from "qiankun";
import App from "./App.vue";const app = createApp(App);app.mount("#app");registerMicroApps([{name: "B_App",entry: "//localhost:5157",container: "#main_container",activeRule: "/cb",},{name: "C_App",entry: "//localhost:5158",container: "#main_container",activeRule: "/c",},
]);
start();
  • 代码分析

registerMicroApps函数
该函数是基于路由去配置微应用,其语法为:registerMicroApps(apps,lifeCycles?)

  • 参数
    • apps:必选,微应用的注册信息,其类型为Array<ReigsterableApp>
    • lifeCycles:可选,全局的微应用生命周期钩子,其类型为LifeCycles
  • 类型

http://www.ppmy.cn/server/145283.html

相关文章

文件防泄密怎么做才更安全?

文件泄密的风险不断增加&#xff0c;为了防止文件泄密&#xff0c;企业开始采取一系列先进的技术手段和管理措施。咱们从三个方面分析&#xff0c;有效的保护企业的文件安全。 一、采用加密软件技术 使用强加密算法对敏感文件进行加密&#xff0c;确保文件在传输和存储过程中不…

【单片机的结构和组成】

目录 1、中央处理单元&#xff08;CPU&#xff09;&#xff1a;2、存储器&#xff1a;3、输入/输出&#xff08;I/O&#xff09;接口&#xff1a;4、定时器/计数器&#xff1a;5、模拟-数字转换器&#xff08;ADC&#xff09;&#xff1a;6、数字-模拟转换器&#xff08;DAC&am…

网络层协议IP

对于网络层我们直接通过IP协议来了解其内容 一.IP协议 首先我们先来了解几个概念&#xff1a; 主机&#xff1a;配有IP地址&#xff0c;但是不进行路由控制的设备 路由器&#xff1a;配有IP地址&#xff0c;同时进行路由控制的设备 节点&#xff1a;主机和路由器的统称 所以现在…

快速理解微服务中Ribbon的概念

一.基本概念 1.在微服务架构中&#xff0c;Ribbon 是一个客户端负载均衡器&#xff0c;用于控制服务间的通信方式。 2.Ribbon 是一个开源的库&#xff0c;最早由 Netflix 开发&#xff0c;用于实现客户端负载均衡。 3.Ribbon 主要解决的是在微服务架构中&#xff0c;多个服务…

postgres-howto 学习笔记

原文来自 postgres-howto 立个小flag每天学习两篇&#xff0c;记录一下 1. 建议用 EXPLAIN (ANALYZE, BUFFERS) 可以看到SQL每步实际的IO数量&#xff08;乘以8K则为字节数&#xff09; 2. pg关闭慢的常见原因 存在大事务/长事务大量缓冲区是脏的 &#xff0c;导致关闭时的检…

ensp静态路由实验

一、实验目的 1、熟练掌握交换机的基本配置命令 2、熟练掌握静态路由的使用方法 3. 熟练掌握交换机端口模式 二、实验内容 需求&#xff1a; 根据要求利用现有实验设备组建小型局域网 实验设备&#xff1a; 交换机S37002台&#xff1b;PC机2台&#xff1b;路由器2台。 …

【AI绘画】Midjourney进阶:色调详解(上)

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AI绘画 | Midjourney 文章目录 &#x1f4af;前言&#x1f4af;Midjourney中的色彩控制为什么要控制色彩&#xff1f;为什么要在Midjourney中控制色彩&#xff1f; &#x1f4af;色调白色调淡色调明色调 &#x1f4af…

计算机网络 第4章 网络层

计算机网络 &#xff08;第八版&#xff09;谢希仁 第 4 章 网络层4.2.2 IP地址**无分类编址CIDR**IP地址的特点 4.2.3 IP地址与MAC地址4.2.4 ARP 地址解析协议4.2.5 IP数据报的格式题目2&#xff1a;IP数据报分片与重组题目&#xff1a;计算IP数据报的首部校验和(不正确未改) …