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

news2024/11/24 0:41:27

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.coloradmin.cn/o/2223720.html

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

相关文章

2024软考网络工程师笔记 - 第8章.网络安全

文章目录 网络安全基础1️⃣网络安全威胁类型2️⃣网络攻击类型3️⃣安全目标与技术 &#x1f551;现代加密技术1️⃣私钥密码/对称密码体制2️⃣对称加密算法总结3️⃣公钥密码/非对称密码4️⃣混合密码5️⃣国产加密算法 - SM 系列6️⃣认证7️⃣基于公钥的认证 &#x1f552…

为微信小程序换皮肤之配置vant

微信小程序自带的控件虽然具有很好的通用性和简洁性&#xff0c;但在面对一些复杂的交互场景和个性化的设计需求时&#xff0c;可能会显得力不从心。其功能的相对基础使得开发者在实现诸如多步骤复杂表单提交、实时数据交互与可视化展示、高度定制化的界面布局等方面&#xff0…

Navicat 安装

Navicat 安装步骤

qt 下载安装

1. 官网地址 https://www.qt.io/ 2. 下载 使用邮箱注册账号&#xff0c;登录&#xff0c;后边安装时也用的到 登录后&#xff1a; 这里需要电话号验证&#xff0c;电话号需要正确的&#xff0c;其他随便填&#xff0c;电话号中国区前需要86&#xff0c; 验证后自动下载 …

[CSP-J 2023] 一元二次方程(模拟)

变态的大模拟…… 洛谷题目传送门https://www.luogu.com.cn/problem/P9750 解题思路 主要还是模拟&#xff0c;题目让你求啥你就求啥&#xff0c;要注意细节。 然后化简根式的可以用质因数分解一下即可。 代码 #include<bits/stdc.h> using namespace std; #define …

opencv 图像翻转- python 实现

在做图像数据增强时会经常用到图像翻转操作 flip。 具体代码实现如下&#xff1a; #-*-coding:utf-8-*- # date:2021-03 # Author: DataBall - XIAN # Function: 图像翻转import cv2 # 导入OpenCV库path test.jpgimg cv2.imread(path)# 读取图片 cv2.namedWindow(image,1) …

C++基础与实用技巧第三节:内存管理与性能优化

第二章&#xff1a;C基础与实用技巧 第三节&#xff1a;内存管理与性能优化 1. 动态内存的管理策略与技巧 动态内存管理是C编程的核心部分之一&#xff0c;合理管理内存可以极大提高程序的性能和稳定性。在C中&#xff0c;动态内存的分配和释放通常使用new和delete运算符&am…

LeetCode_2427. 公因子的数目_java

1、题目 2427. 公因子的数目https://leetcode.cn/problems/number-of-common-factors/ 给你两个正整数 a 和 b &#xff0c;返回 a 和 b 的 公 因子的数目。 如果 x 可以同时整除 a 和 b &#xff0c;则认为 x 是 a 和 b 的一个 公因子 。 示例 1&#xff1a; 输入&#x…

基于springboot企业微信SCRM管理系统源码带本地搭建教程

系统是前后端分离的架构&#xff0c;前端使用Vue2&#xff0c;后端使用SpringBoot2。 技术框架&#xff1a;SpringBoot2.0.0 Mybatis1.3.2 Shiro swagger-ui jpa lombok Vue2 Mysql5.7 运行环境&#xff1a;jdk8 IntelliJ IDEA maven 宝塔面板 系统与功能介绍 基…

实现prometheus+grafana的监控部署

直接贴部署用的文件信息了 kubectl label node xxx monitoringtrue 创建命名空间 kubectl create ns monitoring 部署operator kubectl apply -f operator-rbac.yml kubectl apply -f operator-dp.yml kubectl apply -f operator-crd.yml # 定义node-export kubectl app…

RHCE的练习(4)

多端口访问多网站 第一步&#xff1a; 关闭防火墙&#xff08;因为要与外部连接访问&#xff09; [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0第二步&#xff1a; 创建新IP地址&#xff08;用于区分&#xff09; [rootlocalhost ~]# nmcli…

【南方科技大学】CS315 Computer Security 【Lab6 IoT Security and Wireless Exploitation】

目录 Introduction (Part 1: OS Security for IoT )Software RequirementsStarting the Lab 6 Virtual MachineSetting up the Zephyr Development EnvironmentDownload the Zephyr Source CodeInstalling Requirements and DependenciesSetting the Project’s Environment Va…

PoissonRecon学习笔记

1. Screened Poisson Reconstruction (SPR) 源码&#xff1a;https://github.com/mkazhdan/PoissonRecon However, as noted by several researchers, it suffers from a tendency to over-smooth the data. 泊松重建存在过度平滑的现象。 方法&#xff1a;position and gradi…

为Windows Terminal 配置zsh + Oh-My-Zsh!

参考&#xff1a; 为Windows Terminal 配置zsh Oh-My-Zsh! [非WSL] https://zhuanlan.zhihu.com/p/625583037 Package: zsh - MSYS2 Packages 安装配置 1、安装 Windows Terminal(必须) Method 1: 打开 Microsoft Store&#xff0c;搜索 “Windows Terminal”。点击 “…

Web应用框架-Django应用基础

1. 认识Django Django是一个用Python编写的开源高级Web框架&#xff0c; 旨在快速开发可维护和可扩展的Web应用程序。 使用Django框架的开发步骤&#xff1a; 1.选择合适的版本 2.安装及配置 3.生成项目结构 4.内容开发 5.迭代、上线、维护 Django官网&#xff1a; Djang…

开源表单生成器OpnForm

什么是 OpnForm &#xff1f; OpnForm 是一个开源的表单构建工具&#xff0c;旨在简化创建自定义表单的过程&#xff0c;特别适合无编码知识的用户。它通过人工智能优化表单创建流程&#xff0c;支持多种用途&#xff0c;如联系人表单、调查表等。OpnForm 提供了一个直观的拖放…

最优化方法-无约束优化算法(最速下降法)matlab实现

一、前言 最速下降法 &#xff0c;又称为梯度法&#xff0c;是一种无约束求解多元函数极小值的方法。最速下降法的起源可以追溯到19世纪&#xff0c;最早由数学家Cauchy在1847年提出。随着计算机技术的发展&#xff0c;最速下降法在20世纪50年代逐渐应用于各种优化问题&#x…

BD数字化装备车场:RFID技术的突破之道

传统的车库管理流程主要依赖手工方式&#xff0c;这无疑降低了作业效率&#xff0c;尤其在任务高峰期或紧急情况下&#xff0c;车库进出口的交通堵塞问题尤为突出。随着2023年的到来&#xff0c;我国相继发布了《交通强国建设纲要》与《数字中国建设整体布局规划》等关键政策文…

Uni-App-01

HBuilder安装卸载 安装 下载HBuilder最新版 解压到安装目录&#xff0c;路径中不要有中文和空格 在桌面上增加快捷方式 卸载 执行reset.bat 删除HBuilder文件夹&#xff08;如果提示文件被占用&#xff0c;杀死相关进程再删除&#xff09; 夜神模拟器安装 安装 下…

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

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