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. 启动主应用

最终效果如下

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

智联招聘×Milvus:向量召回技术提升招聘匹配效率

01. 业务背景 在智联招聘平台&#xff0c;求职者和招聘者之间的高效匹配至关重要。招聘者可以发布职位寻找合适的人才&#xff0c;求职者则通过上传简历寻找合适的工作。在这种复杂的场景中&#xff0c;我们的核心目标是为双方提供精准的匹配结果。在搜索推荐场景下&#xff0c…

leetcode-75-颜色分类

题解&#xff08;方案二&#xff09;&#xff1a; 1、初始化变量n0&#xff0c;代表数组nums中0的个数&#xff1b; 2、初始化变量n1&#xff0c;代表数组nums中0和1的个数&#xff1b; 3、遍历数组nums&#xff0c;首先将每个元素赋值为2&#xff0c;然后对该元素进行判断统…

【开源项目】经典开源项目数字孪生工地——开源工程及源码

飞渡科技数字孪生工地管理平台&#xff0c;以物联网、移动互联网技术为基础&#xff0c;充分应用人工智能等信息技术&#xff0c;通过AI赋能建筑行业&#xff0c;对住建项目内人员、车辆、安全、设备、材料等进行智能化管理&#xff0c;实现工地现场生产作业协调、智能处理和科…

【JavaEE】【多线程】单例模式

目录 一、设计模式1.1 单例模式1.1.1 饿汉模式1.1.2 懒汉模式 1.2 线程安全问题1.3 懒汉模式线程安全问题的解决方法1.3.1 原子性问题解决1.3.2 解决效率问题1.3.3 解决内存可见性问题和指令重排序问题 一、设计模式 在讲解案例前&#xff0c;先介绍一个概念设计模式&#xff…

stm32入门教程--ADC模拟-数字转换器

ADC&#xff08;Analog-Digital Converter&#xff09;模拟-数字转换器 ADC可以将引脚上连续变化的模拟电压转你换位内存中存储的数字变量&#xff0c;建立模拟电路到数字电路的桥梁。 12位逐次逼近型ADC&#xff0c;1us转换时间 输入电压范围&#xff1a;0-3.3V转换结果范围…

Pyramidal Flow使用指南:快手、北大、北邮,开源可免费商用视频生成模型,快速上手教程

什么是 Pyramidal Flow&#xff1f; Pyramidal Flow 是由快手科技、北京大学和北京邮电大学联合推出的开源视频生成模型&#xff0c;它是完全开源的&#xff0c;发布在 MIT 许可证下&#xff0c;允许商业使用、修改和再分发。该模型能够通过文本描述生成最高10秒、分辨率为128…

Embedding 模型和Model 批量推理和多卡部署

批量推理 多卡部署 使用huggingface 【AI大模型】Transformers大模型库&#xff08;七&#xff09;&#xff1a;单机多卡推理之device_map_transformers多卡推理-CSDN博客 首先用 CUDA_VISIBLE_DEVICES1,2,3 python 或者os.environ["CUDA_VISIBLE_DEVICES"] &q…

风力发电场的“守护神”

摘要&#xff1a;作为清洁能源之一&#xff0c;风力发电场近几年装机容量快速增长。8月17日&#xff0c;国家能源局发布1-7月份全国电力工业统计数据。截至7月底&#xff0c;全国累计发电装机容量约27.4亿千瓦&#xff0c;同比增长11.5%。其中&#xff0c;太阳能发电装机容量约…

TCP simultaneous open测试

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

转录组上游分析流程(三)

环境部署——数据下载——查看数据(非质控)——数据质控——数据过滤(过滤低质量数据) 测序得到的原始序列含有接头序列和低质量序列&#xff0c;为了保证信息分析的准确性&#xff0c;需要对原始数据进行质量控制&#xff0c;得到高质量序列(Clean Reads)&#xff0c;原始序列…

Linux系统块存储子系统分析记录

1 Linux存储栈 通过网址Linux Storage Stack Diagram - Thomas-Krenn-Wiki-en&#xff0c;可以获取多个linux内核版本下的存储栈概略图&#xff0c;下面是kernel-4.0的存储栈概略图&#xff1a; 2 存储接口、传输速度 和 协议 2.1 硬盘 《深入浅出SSD&#xff1a;固态存储核心…

(二十三)Java反射

1.反射概念 反射允许对成员变量&#xff0c;成员方法和构造方法的信息进行编程访问&#xff0c;通俗理解就是允许从类里面拿东西&#xff0c;用途有提示词等&#xff0c;如下所示都是通过反射实现的 所以&#xff0c;学习反射就是学习从字节码class文件中获取成员信息并且对其…

stable diffusion WEBUI Brief summary

1&#xff0c;rembg(去除背景-》蒙版) import rembg from PIL import Image, ImageOps import numpy as np# 打开图像 input_path "./p_6258838.jpg" input_image Image.open(input_path)# 移除背景&#xff0c;得到带有透明背景的图像 output_image rembg.remove…

利用大模型进行复杂决策制定:PlanRAG技术的研究

人工智能咨询培训老师叶梓 转载标明出处 有效的决策制定对于组织的成功至关重要。传统的决策支持系统虽然在数据分析和决策辅助方面取得了一定的进展&#xff0c;但在处理需要复杂数据分析的决策问题时仍显不足。为了解决这一问题&#xff0c;来自韩国高等科学技术院&#xff…

fpga系列 HDL: 竞争和冒险 01

卡诺图是一种逻辑化简工具&#xff0c;用来在布尔函数的最小项和形式中&#xff0c;找到冗余项并实现逻辑化简。也可用于HDL中竞争和冒险的判断。 最小项 任何一个逻辑函数都能化简为最小项的和的形式对于 n 个变量的布尔表达式&#xff0c;每个变量都必须以原变量&#xff0…

Zabbix企业级分布式监控环境部署

“运筹帷幄之中&#xff0c;决胜千里之外”。在IT运维中&#xff0c;监控占据着重要的地位&#xff0c;按比例来算&#xff0c;说占30%一点也不为过。对IT运维工程师来说&#xff0c;构建一个真正可用的监控告警系统是一项艰巨的任务。在监控系统的开源软件中&#xff0c;可供选…

基于模型划分的云边协同推理算法

摘要 在网络状态和任务需求的动态变化下&#xff0c;为减少模型推理时延和计算成本&#xff0c;在软件定义网络( Software Defined Network&#xff0c;SDN) 中提出了一种基于模型划分的云边协同推理算法。通过构建复杂度预测器分配任务执行环境&#xff0c;采用深度Q网络(Dee…

国产标准数字隔离器的未来---克里雅半导体

标准数字隔离器是电信号隔离技术的重要组成部分&#xff0c;近年来取得了重大进展。随着工业自动化、汽车电子和电信等行业对更高性能的需求不断增长&#xff0c;国内数字隔离器制造商正在稳步赶上全球标准。本文讨论了数字隔离器技术的新兴趋势、材料创新的影响&#xff0c;以…

网站建设中需要注意哪些安全问题?----雷池社区版

服务器与应用安全指南 1. 服务器安全 1.1 操作系统安全 及时更新补丁&#xff1a;确保操作系统始终安装最新补丁&#xff0c;以防范系统漏洞。例如&#xff0c;Windows Server 定期推送安全更新&#xff0c;修复如远程代码执行等潜在威胁。优化系统服务配置&#xff1a;关闭不…

一家医药企业终止,收入依赖阿里健康,学术推广费快赶上净利润

知原药业终止原因如下&#xff1a;知原药业报告期三年的推广费用超3亿元&#xff0c;快赶上这三年累计3.68亿元的净利润了&#xff0c;交易所质疑其学术推广费单价合理性、是否存在销售返利。并且&#xff0c;公司研发费用率低于行业平均水平&#xff0c;在电商平台营销主要依赖…