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;然后对该元素进行判断统…

druid 连接池监控报错 Sorry, you are not permitted to view this page.本地可以,发布正式出错

简介&#xff1a; druid 连接池监控报错 Sorry, you are not permitted to view this page. 使用Druid连接池的时候&#xff0c;遇到一个奇怪的问题&#xff0c;在本地&#xff08;localhost&#xff09;可以直接打开Druid连接池监控&#xff0c;在其他机器上打开会报错&#…

计数问题[NOIP2013]

题目描述 试计算在区间 1 到 n 的所有整数中&#xff0c;数字 x&#xff08;0≤x≤9&#xff09;共出现了多少次&#xff1f;例如&#xff0c;在 1 到 11 中&#xff0c;即在 1,2,3,4,5,6,7,8,9,10,11 中&#xff0c;数字 1 出现了 4 次。 输入格式 2 个整数 n,x&#xff0c;之…

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

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

sortablejs(前端拖拽排序的实现)

源文档&#xff1a;sortablejs - npm 安装 npm install sortablejs --save 引入项目 import Sortable from sortablejs; 使用示例 <template><ul id"items"><li>item 1</li><li>item 2</li><li>item 3</li>&l…

【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…

Docker搭建开源Web云桌面操作系统Puter和DaedalOS

文章目录 Puter 操作系统说明基于 Docker 启动 Puter 操作系统拉取镜像运行容器基于 Docker-Compose 启动 Puter操作系统创建目录编写docker-compose.yml运行在本地直接运行puter操作系统puter界面截图puter个人使用总结构建自己的Puter镜像daedalos基于web的操作系统说明技术特…

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;太阳能发电装机容量约…

【Flutter】基础入门:Widgets

在 Flutter 中&#xff0c;Widget 是应用程序构建块的基础。几乎所有的对象都是一个 Widget&#xff0c;不论是显示在屏幕上的 UI 元素&#xff0c;还是一些功能性组件&#xff08;例如用于手势检测的 GestureDetector&#xff0c;或用于传递应用主题数据的 Theme&#xff09;&…

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文件中获取成员信息并且对其…

AndroidAppWidget相关

特殊情况记录 OPPO FIND N Android14 当桌面已经存在AppWidget实例&#xff0c;如果应用处于杀死状态下&#xff0c;此时再创建相同的AppWidget实例不会触发AppWidget的更新。 创建不同的AppWidget对应的实例时才会一下子触发多个AppWidget示例的更新。

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…

Markdown语法详解及常见的使用场景

Markdown语法详解 Markdown概念一、标题二、段落三、字体样式四、列表五、链接和图片六、代码八、分隔线九、引用十、删除线和下划线十一、脚注十二、任务列表十三、高级技巧十四、目录生成 Markdown的应用场景 Markdown概念 Markdown是一种轻量级标记语言&#xff0c;以其简洁…