micro-app【微前端实战】主应用 vue3 + vite 子应用 vue3+vite

micro-app 官方文档为
https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/framework/vite

子应用

无需任何修改,直接启动子应用即可。

在这里插入图片描述

主应用

1. 安装微前端框架 microApp

npm i @micro-zoe/micro-app --save

2. 导入并启用微前端框架 microApp

src/main.ts

import microApp from '@micro-zoe/micro-app'

microApp.start()

3. 添加配置

vite.config.ts 的 vue 中添加配置

    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => /^micro-app/.test(tag)
        }
      }
    }),

4. 页面引入子应用

<micro-app name="childApp1" url="http://127.0.0.1:5174/" iframe></micro-app>
  • name:必传参数,必须以字母开头,且不可以带特殊符号(中划线、下划线除外)
  • url:必传参数,必须指向子应用的 index.html
  • 子应用为 vite 时,需添加 iframe

5. 启动主应用

最终效果如下

在这里插入图片描述

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

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

相关文章

手机摄影入门

感觉会摄影的人是能够从生活中发现美的人。 我不太会拍照&#xff0c;觉得拍好的照片比较浪费时间&#xff0c;而且缺乏审美也缺乏技巧&#xff0c;所以拍照的时候总是拍不好。但有时候还是需要拍一些好看的照片的。 心态和审美可能需要比较长时间提升&#xff0c;但一些基础…

Apple Vision Pro市场表现分析:IDC最新数据揭示的真相

随着AR/VR技术逐渐成熟并被更多消费者接受,2024年第二季度(Q2)成为这一领域的一个重要转折点。根据国际数据公司(IDC)发布的最新报告,整个AR/VR市场在本季度经历了显著的增长。接下来,我们将深入探讨Apple Vision Pro在这股增长浪潮中的具体表现。 市场背景 2024年Q2,…

中航资本:股票支撑位和压力位什么意思?股票如何找支撑与压力?

股票支撑位和压力位什么意思&#xff1f; 支撑位是指股票价格在下跌过程中遇到的一个或多个价格方位&#xff0c;这些价位上存在着较强的买盘力气&#xff0c;可以提供满足的支撑&#xff0c;阻止股价继续下跌。 而股票压力位是指股票价格在上涨过程中遇到的一个或多个价格方…

docker部署rustdesk

文章目录 一.ubuntu修改ssh端口二.开放端口三.安装rustDesk四.连接验证 一.ubuntu修改ssh端口 借鉴乌班图Ubuntu 24.04 SSH Server 修改默认端口重启无效 https://bugs.launchpad.net/ubuntu/source/openssh/bug/2069041 sudo vim /etc/ssh/sshd_config sudo systemctl daem…

在windows下利用安装docker加vscode调试OceanBase,

文章目录 一、安装WSL二、安装docker三、 OceanBase安装 -- 运行镜像&#xff0c;配置VScode四、 OceanBase安装 -- 将获取到的文件与docker容器 映射连接 – 参考官方文档 docker安装 在windows上通过docker配置环境并利用vscode调试代码 一、安装WSL 1.可以在任务管理器中&…

⌈ 传知代码 ⌋ 农作物病害分类(Web端实现)

&#x1f49b;前情提要&#x1f49b; 本文是传知代码平台中的相关前沿知识与技术的分享~ 接下来我们即将进入一个全新的空间&#xff0c;对技术有一个全新的视角~ 本文所涉及所有资源均在传知代码平台可获取 以下的内容一定会让你对AI 赋能时代有一个颠覆性的认识哦&#x…

我谈椒盐噪声的统计模型

在成像系统发展长河的早期&#xff0c;椒盐噪声曾经不可避免&#xff0c;但是如今&#xff0c;即使在专用成像设备中&#xff08;如遥感、医学&#xff09;&#xff0c;椒盐噪声也属罕见了。所以&#xff0c;现在在图像处理领域&#xff0c;研究椒盐噪声的去除没有多少实际意义…

kafka 如何减少数据丢失?

大家好&#xff0c;我是锋哥。今天分享关于【kafka 如何减少数据丢失?】面试题&#xff1f;希望对大家有帮助&#xff1b; kafka 如何减少数据丢失? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Apache Kafka 是一个高吞吐量的分布式消息队列&#xff0c;广泛用…

R实验——logistic回归、LDA、QDAKNN

数据集介绍&#xff1a; mpg&#xff0c;miles per gallon即油耗&#xff0c;这个数据集来自卡内基梅隆大学维护的StatLib库。1983年美国统计协会博览会使用了该数据集。这个数据集是对StatLib库中提供的数据集稍加修改的版本。根据Ross Quinlan(1993)在预测属性“mpg”中的使…

python-PyQt项目实战案例:制作一个视频播放器

文章目录 1. 关键问题描述2. 通过OpenCV读取视频/打开摄像头抓取视频3. 通过PyQt 中的 QTimer定时器实现视频播放4. PyQt 视频播放器实现代码参考文献 1. 关键问题描述 在前面的文章中已经分享了pyqt制作图像处理工具的文章&#xff0c;也知道pyqt通过使用label控件显示图像的…

AI视听新体验!浙大阿里提出视频到音乐生成模型MuVi:可解决语义对齐和节奏同步问题

MuVi旨在解决视频到音乐生成(V2M)中的语义对齐和节奏同步问题。 MuVi通过专门设计的视觉适配器分析视频内容,以提取上下文 和时间相关的特征,这些特征用于生成与视频的情感、主题及其节奏和节拍相匹配的音乐。MuVi在音频质量和时间同步方面表现优于现有基线方法,并展示了其在风…

安装nginx实现多ip访问多网站

一.首先安装nginx [rootserver nginx]# systemctl stop firewalld 关防火墙 [rootserver nginx]# setenforce 0 关selinux [rootserver nginx]# mount /dev/sr0 /mnt 挂载点 [rootserver nginx]# dnf install nginx -y 安装nginx二&#xff0c;添加地址 [rootserver…

Electron入门笔记

Electron入门笔记 ElectronElectron 是什么Electron流程模型创建第一个Electron项目配置自动重启主进程和渲染进程通信打包应用 Electron Electron 是什么 跨平台的桌面应用开发框架使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium和 Node.js Electro…

不使用扩展,win10下网页长截图

安卓手机&#xff0c;各大厂商都会有自带的长截图工具&#xff0c; 用起来很方便&#xff0c; 反而是windows桌面版网页长截图&#xff0c; 偶尔会用下&#xff0c;用得不多&#xff0c; 用一次后下次用又忘记了&#xff0c; 今天正好要用到&#xff0c; 特记录下方便以后查阅…

TCP simultaneous open测试

源代码 /*************************************************************************> File Name: common.h> Author: hsz> Brief:> Created Time: 2024年10月23日 星期三 09时47分51秒**********************************************************************…

深度学习技术演进:从 CNN、RNN 到 Transformer 的发展与原理解析

深度学习的技术演进经历了从卷积神经网络&#xff08;CNN&#xff09;到循环神经网络&#xff08;RNN&#xff09;再到 Transformer 的重要发展。这三个架构分别擅长处理图像、序列数据和多种任务的特征&#xff0c;标志着深度学习在不同领域取得的进步。 1. 卷积神经网络&…

旧电脑安装Win11提示“这台电脑当前不满足windows11系统要求”,安装中断。怎么办?

前言 最近有很多小伙伴也获取了LTSC版本的Win11镜像&#xff0c;很大一部分小伙伴安装这个系统也是比较顺利的。 有顺利安装完成的&#xff0c;肯定也有安装不顺利的。这都是很正常的事情&#xff0c;毕竟这个镜像对电脑硬件要求还是挺高的。 有一部分小伙伴在安装Windows11 …

Flutter项目打包ios, Xcode 发布报错 Module‘flutter barcode_scanner‘not found

报错图片 背景 flutter 开发的 apple app 需要发布新版本&#xff0c;但是最后一哆嗦碰到个报错&#xff0c;这个小问题卡住了我一天&#xff0c;之间的埪就不说了&#xff0c;直接说我是怎么解决的&#xff0c;满满干货 思路 这个报错 涉及到 flutter_barcode_scanner; 所…

基于Python+SQL Server2008实现(GUI)快递管理系统

快递业务管理系统的设计与实现 摘要: 着网络新零售的到来&#xff0c;传统物流在网购的洗礼下迅速蜕变&#xff0c;在这场以互联网为基础的时代变革中&#xff0c;哪家企业能率先转变其工作模式就能最先分得一杯羹&#xff0c;物流管理也不例外。传统的物流管理模式效率低下&a…

聚焦IOC容器刷新环节postProcessBeanFactory(BeanFactory后置处理)专项

目录 一、IOC容器的刷新环节快速回顾 二、postProcessBeanFactory源码展示分析 &#xff08;一&#xff09;模版方法postProcessBeanFactory &#xff08;二&#xff09;AnnotationConfigServletWebServerApplicationContext 调用父类的 postProcessBeanFactory 包扫描 …