MicroApp 一款简约、高效、功能强大的微前端框架 开始使用在线案例 特性 只需一行代码,实现微前端,如此简单 无关技术栈,任何框架皆可使用 能力 JS沙箱 样式隔离 元素隔离 数据通信 插件系统 预加载 快速开始
通过⾃定义元素micro-app 的⽣命周期函connectedCallback 监听元素被渲染,加载⼦应⽤的html并转换为DOM结构,递归查询所有js和css等静态资源并加载,设置元素隔离,拦截所有动态创建的script、link等标签,提取标签内容。将加载的js经过插件系统处理后放⼊沙箱中运⾏,对css资源进⾏样式隔离,最后将格式化后的元素...
npm i @micro-zoe/micro-app--save package.json文件里面dependencies里面会多一行代码,看到下面代码则表示项目已经具备micro-app接入能力了。 代码语言:javascript 代码运行次数:0 运行 AI代码解释 "@micro-zoe/micro-app":"^1.0.0-alpha.7" (4)在入口引入micro-app 首先在根目录下创建一个global.tsx文件 代码...
yarn add @micro-zoe/micro-app pnpm add @micro-zoe/micro-app npm i @micro-zoe/micro-app 2. 在应用入口main.js 中引入并启动micro-app。 import microAppfrom'@micro-zoe/micro-app'microApp.start({destroy:true}) 3. 创建页面page1,承载子页面 ,配置子项目的地址路由,参考:https://zeroing.jd.co...
目录 收起 微前端 MicroApp 快速开始 主应用-React 写在后面 相关内容指北 本篇文章为 MicroApp 的使用初探,您可以选择通过 官方demo 进行对框架全面了解。 微前端 微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个...
MicroApp是由京东前端团队推出的一款微前端框架,它从组件化的思维,基于类WebComponent进行微前端的渲染,旨在降低上手难度、提升工作效率。MicroApp 无关技术栈,也不和业务绑定,可以用于任何前端框架。 源码地址:https://github.com/micro-zoe/micro-app 官网地址:https://micro-zoe.github.io/micro-app ...
1.1 已参考 微服务版(MicroApp)安装环境准备 完成基础环境部署; 1.2 已参照手册部署 AFCENTER 微服务版介质(V8.3.2)并初始化 AFCENTER 的数据库; 1.3 约定AFCENTER 前端部署路径为:/opt/dws/afcenter_ui,后端路径为:/opt/dws/afcenter-base,数据库为:afc。 1.4 将 /api/eos/tools/actions/call-method 加...
micro-app提供了一套灵活的数据通信机制,方便主应用和子应用之间的数据传输。 主应用和子应用之间的通信是绑定的,主应用只能向指定的子应用发送数据,子应用只能向主应用发送数据,这种方式可以有效的避免数据污染,防止多个子应用之间相互影响。 同时我们也提供了全局通信,方便跨应用之间的数据通信。
精准反馈,高效沟通 我知道了查看详情 登录注册 微服务项目 概览仓库IssuesPull Requests动态成员3 申请加入组织 申请加入组织 您正在申请加入micro-app 角色 开发者 姓名 理由 取消 提交 自定义精选项目 最多可选取 6 个公开仓库 还能勾选6个 组织介绍
MicroApp 版安装 MicroApp版介质部署前,请先参照手册部署AFCENTER微服务版介质(V8.3.0)并初始化AFCENTER的数据库; 约定AFCENTER前端部署路径为:/opt/dws/afcenter_ui,后端路径为:/opt/dws/afcenter-base,数据库为:afc。 AFCENTER前端部署结果如下: afcenter_ui...