同时,在子应用的入口文件中(如main.js或main.ts),确保没有重复挂载Vue实例的代码,因为micro-app会负责挂载和卸载子应用。 5. 配置通信 micro-app提供了一套灵活的数据通信机制,方便主应用和子应用之间的数据传输。你可以通过<micro-app>组件的data属性向子应用发送数据,也可以在子应用中通过window.microA...
* 当前vue-router版本:4.0.12*/functionfixBugForVueRouter4(router: Router) {//判断主应用是main-vue3或main-vite,因为这这两个主应用是 vue-router4if(window.__MICRO_APP_ENVIRONMENT__) {//if (window.location.href.includes('/main-vue3') || window.location.href.includes('/main-vite')) {/...
2-1、创建base,在micro-app-demo文件夹下安装 接上一步,使用vsCode将新建好的文件夹micro-app-demo打开,如下图所示,打开一个新终端,在下面输入命令创建base,创建时可选择vue2还是vue3,我这边以vue2为例,如果要选vue3的话,下面代码中的语法会不一样。 我这边选择vue2后,安装完成后,效果如下图所示: 可以从...
* 当前vue-router版本:4.0.12*/functionfixBugForVueRouter4(router: Router) {//判断主应用是main-vue3或main-vite,因为这这两个主应用是 vue-router4if(window.__MICRO_APP_ENVIRONMENT__) {//if (window.location.href.includes('/main-vue3') || window.location.href.includes('/main-vite')) {/...
micro-app与技术栈无关,对前端框架没有限制,任何框架都可以作为基座应用嵌入任何类型的子应用。 快速开始 1. 基座应用 //初始化一个vue应用vue create main-vue//安装 @micro-zoe/micro-app 依赖npm i @micro-zoe/micro-app --save// 入口添加 // main.jsimport Vue from "vue";import App from "./...
vue create app_first vue create app_second 基项目修改 添加本地运行配置文件vue.config.js module.exports= {devServer: {host:'localhost',port:3000} } 安装micro-app 插件 npm install @micro-zoe/micro-app --save 添加micro/index.js文件
micro-app是京东零售推出的一款微前端框架,它基于类WebComponent进行渲染,从组件化的思维实现微前端,旨在降低上手难度、提升工作效率。它是目前接入微前端成本最低的框架,并且提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。
https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/framework/vite 子应用 无需任何修改,直接启动子应用即可。 主应用 1. 安装微前端框架 microApp AI检测代码解析 npm i @micro-zoe/micro-app --save 1. 2. 导入并启用微前端框架 microApp ...
vite+vue+micro-app 配置分为两部分，主应用也就是基座应用，子应用部分：基座应用：入口文件main.js,映入微前端引擎micro-app启动微前端。此处的loader的作用是因为vite开发模式下引入的资源是相对路径，但是子应用也是vite的情况下，主应用加载资源的时候就会以主应用为域名去加载，加载不到子应用的资源，所以无法...
micro-app 官方地址 micro-app 官方demo地址 这篇文章主要是为了记录,本人在使用中遇到的一些问题,供参考 资源找不到 -> 本地使用代理,显示nginx转发 子应用使用组件插槽或者pinia,路由懒加载报错问题 ->小项目几个路由不要懒加载,大项目中懒加载的时候不要使用pinia或者组件中不适用 ...