micro-app提供了一套灵活的数据通信机制,方便主应用和子应用之间的数据传输。你可以通过<micro-app>组件的data属性向子应用发送数据,也可以在子应用中通过window.microApp.getData()获取数据,并通过window.microApp.dispatch()向主应用发送数据。 例如,在主应用中发送数据到子应用: vue <template> &...
* 当前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')) {/...
* 当前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')) {/...
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 src/main.ts AI检测代码解析 import microApp from '@...
import microApp from '@micro-zoe/micro-app' microApp.start() <micro-app :name="name" :url="url" iframe router-mode='native' keep-alive></micro-app> 子应用中路由跳转: router.push({ path: `/MF_customer/${path}`, query: { a: 1 } }); } 跳转后地址栏中的url发生了变化但是父应用...
setup() { const state = reactive({ microApp_ifs: null, microApp_pis: null, microApp_tms: null, data: [], ifs: 0, pis: 0 }); const route = useRouter(); watch(() => route.currentRoute.value.path, (count, prevCount) => { if (count.indexOf('/ifs/eam') != -1) { state...
micro-app 插件是对 MicroApp 的二次封装。由于 micro-app 在微前端应用中,对作为基座的应用和作为子应用的配置和方法不同。该模板为了提供统一的 micro-app 配置,需要对 micro-app 二次封装,以屏蔽在基座应用和子应用时的配置和方法差异。模板提供统一的参数配置,将模板配置为 微前端的基座应用 或 子应用。
3-1 技术选型:基于micro-app框架的微前端应用 15:46 3-2 架构设计:一站式微前端架构设计方案 05:19 4-1 开发环境搭建:nvm、node 09:25 4-2 主、子应用的后端API联调说明 06:23 5-1 导学 00:55 5-2 vue3+vite4主应用快速构建 05:12 5-3 vue3全家桶集成:vue-router、axios 27:10 5-5 封装通...
其他几款([single-spa]、[micro-app]、[百度emp]]) 使用iframe 整合系统时,假设我们有系统 A, 当我们想把系统 B 引入 A 系统时,只需要 B 系统提供一个 url 给 A 系统引用即可,这里我们把 A 系统叫做父应用,把 B 系统叫做子应用。同样的,微前端也延续了这个概念,微前端在使用起来基本和使用 iframe 一...
在App.vue挂载微应用节点 代码语言:javascript 代码运行次数:0 运行 AI代码解释 微应用micro-vue-app(vue3+vite) qiankun目前是不支持vite的,需要借助插件完成 安装vite-plugin-qiankun 代码语言:javascript 代码运行次数:0 运行 AI代码解释 npm install vite-plugin-qiankun 修改vite.config.js 代码语言:javascr...