微前端探索：Micro-Zoe 的 Micro-App-Demo 项目解析

最新推荐文章于 2024-04-29 13:18:29 发布
最新推荐文章于 2024-04-29 13:18:29 发布
阅读量301 收藏 10
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gitblog_00012/article/details/137133701
版权

微前端探索：Micro-Zoe 的 Micro-App-Demo 项目解析

项目地址:https://gitcode.com/micro-zoe/micro-app-demo

在这个快速迭代的时代，前端应用的复杂性日益增强，单体应用模式已无法满足大型项目的需求。微前端作为一种创新的架构模式，将大型应用拆分为小型、独立的子应用，以实现更好的模块化和可维护性。而 Micro-Zoe 是一个强大的微前端框架，它的 Micro-App-Demo 项目则为我们提供了一个直观的实践示例。

项目简介

Micro-App-Demo 是基于 Micro-Zoe 构建的一个多页面应用实例，它展示了如何在同一个主应用中无缝集成多个子应用，每个子应用都可以独立开发、部署和更新。通过此项目，开发者可以理解并学习到如何利用微前端技术构建大型的前端应用。

技术分析

  1. 路由管理 - Micro-App-Demo 使用 Micro-Zoe 内置的路由系统，能够智能地处理子应用之间的跳转，保证了路由的平滑过渡和状态管理。

  2. 资源加载策略 - 子应用按需加载，只有当被访问时才会加载对应的子应用，显著提高了首屏加载速度，提升了用户体验。

  3. API 共享与隔离 - 该项目演示了如何在不同的子应用之间共享或隔离 API 接口，使得数据交互更加灵活和安全。

  4. 生命周期管理 - Micro-Zoe 提供了丰富的生命周期钩子，方便开发者在子应用的创建、挂载、卸载等阶段进行定制化的操作。

  5. 样式隔离 - 为了防止样式冲突，Micro-App-Demo 利用了 Micro-Zoe 自动为每个子应用添加命名空间的特性，确保了各子应用的样式独立。

应用场景

  1. 企业级后台系统 - 对于拥有多个部门、不同功能模块的企业级后台，Micro-App-Demo 可帮助构建模块化的管理系统，便于团队协作和后期维护。

  2. 电商平台 - 不同的商品分类、购物车、支付等模块可以通过子应用的形式独立开发和升级，提升用户体验。

  3. 个性化定制 - 用户可以根据自己的需求加载不同的功能模块，实现个性化的应用体验。

特点总结

  1. 轻量且高效 - Micro-Zoe 框架设计简洁，体积小巧，对性能的影响极小。

  2. 易学易用 - Micro-App-Demo 提供详细的代码注释和文档，让初学者也能快速上手。

  3. 高度可扩展 - 支持多种前端框架的子应用集成，便于现有项目的改造和新功能的扩展。

  4. 良好的社区支持 - Micro-Zoe 社区活跃，开发者们可以在这里获取最新的资讯和技术支持。

如果你正在寻找一个实战型的微前端解决方案，或是想了解微前端的技术原理，那么 Micro-App-Demo 将是一个绝佳的学习起点。让我们一起探索微前端的世界，打造更高效的前端应用吧！

项目地址:https://gitcode.com/micro-zoe/micro-app-demo

gitblog_00012
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
pan-zoe-blog
03-16
环境要求 php : "^7.3|^8.0", 部署 npm install -g laravel-echo-server-保存 作曲家安装 cp .env.example .env PHP的工匠键：生成 PHP迁移 PHP的工匠db：seed php artisan queue：工作--sleep = 3 --tries = 3 npm安装 npm run dev laravel-echo-server.json已经在项目的根目录，修改authHost cd你的项目目录laravel-echo-server start 重新使用github授权登录请填写.env GITHUB_CLIENT_ID GITHUB_CLIENT_SECRET 命令 php artisan msg：clear清除聊天数据以及缓存 关于 这篇博客主要技术栈使用一下核心特别感谢作者为写了这么多好用的轮子，
fast-ai-zoe-demo:使用S-Analytics的React Web应用程序
05-03
:thermometer: :alarm_clock: :atom_symbol: S-Analytics数据收集器是针对Web或移动平台的监视JavaScript代码。 它收集有关访客行为及其设备的数据。 该存储库显示了如何将S-Analytics集成到React应用程序。 例子 完整的示例和注释可以在找到。
微前端之micro-app
最新发布
weixin_53094984的博客
04-29 423
是一个基于 自定义元素Custom Elements（Web Components）和 影子DOM（Shadow DOM）技术的微前端框架。它将前端应用封装为独立的自定义元素，并使用一套通信机制和生命周期管理来实现微前端应用之间的解耦和独立部署。它的轻量级设计和原生浏览器支持的特性使得它具有良好的性能和兼容性，并且可以与其他前端框架（如 React、Vue、Angular 等）进行集成。
zoe-lossless-codec:Zoe AVI文件的无损编解码器
05-06
zoe-lessless编解码器 Zoe AVI文件的无损编解码器 Zoe Lossless Codec是一个视频压缩/解压缩模块，可在Windows视频（VfW）框架下的AVI文件中使用。 编码后的数据通常将存储在AVI文件中。 当前版本允许以“ Y8”或“ Y10”格式以及RGB24，RGB32和UYVY无损压缩灰度视频数据。 RGB格式按通道进行编码，无需任何色彩空间转换。 “ Y10”是一个新的FOURCC码，代表存储在16位字的LSB中的10位灰度数据。 修订历史：2014-04-15 E. Danvoye初始版本2014-04-15 E. Danvoye 1.0.1修复了CRT分配器2014-05-02崩溃的问题E. Danvoye 1.0.2多通道，支持RGB24和RGB32 2014- 05-05 E. Danvoye 1.0.4直接向RGB24添加UYVY解压缩2014
zoe-express:zoe-express 用于从 yaml 文件生成 RESTful API； 使用 mongo、node.js 和 express 作为实现
06-29
佐伊快递 zoe-express 用于从 yaml 文件生成 RESTful API； 使用 mongo、node.js 和 express 作为实现。 zoe-express 背后的想法是通过元数据生成的代码可以是： 全球快速修改 更容易排除故障； 因为所有模型和控制器都是从同一个模板生成的 部署更快； 随着后端 api 的生成（： 安装 $ sudo npm install -g git://github.com/chubbz327/zoe-express.git 用法 zoe-express 使用基于猫鼬模式声明的 yaml 文件； 例如以下模式： /模型/Test.js var mongoose = require('mongoose'); var TestSchema = new mongoose.Schema( { name : String , update
ioBroker.zoe2:使用与myRenault APP相同的API的Renault ZOE ioBroker适配器
05-22
iobroker.zoe2 ================= 测试： 执照： 特征： 简单的ioBroker-Adapter可以从Renault ZOE获取一些基本值，并在ioBroker中使用它。 请注意：此适配器将相同的API用作MY RENAULT APP。 但是在使用此适配器之前，您必须先设置我的RENAULT应用才能正常工作。 即在Android上： : id RENAULT+SAS-如果要使用旧版api，请使用反而。 请注意：这是一种非常早期的发展状态，需自行承担风险 请注意：对适配器进行任何更新之后，请转到设置屏幕，对启用的部分进行更改，然后将其更改并保存！ 如果此适配器在ioBroker-Admin-View上不可用，请使用以下命令进行安装（从ioBroker-Server上的命令行）： npm install https://github.
【微前端】micro-app搭建项目实战
weixin_50636536的博客
12-27 849
url必须指向子应用的index.html，如：http://localhost:3000/ 或 http://localhost:3000/index.html。修改 package.json、package-lock.json 两个文件中的name名称，让其与主应用注册组件name名称一致，不一致时子应用注入不到主应用中。更多配置请参考官方：https://micro-zoe.github.io/micro-app/每个name都对应一个应用，当多个应用同时渲染时，name不可以重复。
microapp微前端基础使用
haosicx的博客
11-08 852
【代码】microapp微前端基础使用。
微前端（micro-app）使用手册
StoneHui
06-25 2634
micro-app 是借鉴了 WebComponent 的思想，通过 CustomElement 结合自定义 ShadowDom，将微前端封装成一个类 WebComponent 组件，从而实现组件化。
微前端 - micro-app
lhz_333的博客
08-15 3107
之前已经实践过阿里微前端框架 qiankun，现在来使用一下京东推出的微前端解决方案 - MicroApp。
MicroApp搭建样例(一)
Keith_Lee的博客
06-22 746
简单上手MicroApp微服务框架
Micro-app 微前端框架demo介绍
瓜皮伦的博客
01-07 1609
主应用1、创建一个页面，需要加入micro-app自定义元素2、配置路由子应用1、如果在微前端中，加上路由前缀2、设置跨域。
神秘的微前端（本文所介绍的是关于micro-app在项目中的实际应用）
qq_43608549的博客
06-16 1924
MicroApp借鉴了WebComponent的思想，通过CustomElement结合自定义的ShadowDom，将微前端封装成一个类WebComponent组件，从而实现微前端的组件化渲染。并且由于自定义ShadowDom的隔离特性，micro-app不需要像single-spa一样要求子应用修改渲染逻辑并暴露出方法，也不需要修改webpack配置，其次就是接入成本低、兼容性高、性能强是我们选择MicroApp作为微前端框架使用的重要因素。
浅入深出的微前端MicroApp | 京东云技术团队
京东科技开发者
09-21 631
本文是由最近做的一个项目有感而发，因为之前做了一些技术栈的统一，为了用ant Design的pro-table，PC统一使用react，但是我们有一些老的项目是vue的，本次新页面较多，老页面的改动较少，除此之外老项目想换菜单，因此我们想借助本次机会用react开发，经过了几番思考，发现本次很适合用微前端来完成本次需求，最终决定用react搭建一个基座（主应用），将原来的vue项目接入到基座，这样我们不仅实现了新页面react开发，而且老项目也能和新项目融合一起。
七个步骤教你快速入门搭建一个 micro-app微前端简单上手
Start的小笔记
12-21 1710
我这不是webpack的项目，我跳过这个步骤。在main最顶部导入，也就是子应用入口文件的。就是访问这个路由菜单的时候加载子应用。的事件，在此可以进行卸载相关操作。子应用被卸载时会接受到一个名为。下面这两个是如何使用。
微前端MicroApp的学习（一）：简单搭建项目
weixin_41897680的博客
04-10 7845
微前端MicroApp的学习（一）：简单搭建项目
微前端 - micro-app 数据通信
lhz_333的博客
08-15 4195
上文记录了下如何在项目中接入 micro-app，本文主要记录下微前端基座应用和子应用之间的数据通信。
微前端之 三 Micro App (京东) 框架使用
我的世界我的光彩
04-03 2231
Micro App框架 基座应用 子应用
react作为基座项目，vite作为子项目，使用micro-zoe/micro-app的该怎么进行连接
05-21
要将React作为基座项目，Vite作为子项目，并使用micro-zoe/micro-app进行连接，可以按照以下步骤进行操作： 1. 在基座项目的根目录下安装micro-zoe： ``` npm install micro-zoe --save ``` 2. 在基座项目的入口文件中（通常是App.js或index.js），引入micro-zoe并注册需要使用的子应用程序： ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import { registerMicroApps, start } from 'micro-zoe'; import App from './App'; // 注册子应用 registerMicroApps([ { name: 'vite-app', entry: '//localhost:3001', container: '#subapp-container', activeRule: '/vite', }, ]); // 启动应用 start(); ReactDOM.render(<App />, document.getElementById('root')); ``` 这里我们注册了一个名为`vite-app`的子应用，入口地址为`//localhost:3001`，容器选择器为`#subapp-container`，路由匹配规则为`/vite`。 3. 在子应用项目中，安装micro-app： ``` npm install micro-app --save ``` 4. 在子应用项目的入口文件main.js中，使用micro-app暴露出来的生命周期函数和render方法： ```js import { registerMicroApps, start } from 'micro-app'; function render() { ReactDOM.render(<App />, document.getElementById('root')); } if (!window.__MICRO_APP__) { render(); } export async function bootstrap() { console.log('vite-app bootstraped'); } export async function mount() { console.log('vite-app mounted'); render(); } export async function unmount() { console.log('vite-app unmounted'); ReactDOM.unmountComponentAtNode(document.getElementById('root')); } ``` 这里我们使用了`render`方法将子应用渲染到`#root`节点上，并在`bootstrap`、`mount`、`unmount`生命周期中分别输出了日志。 5. 在子应用项目的package.json中添加微前端特定的配置项： ```json { "name": "vite-app", "version": "0.1.0", "micro-app": { "name": "vite-app", "port": 3001, "url": "//localhost:3001", "js": "http://localhost:3001/js/app.js" }, "scripts": { "dev": "vite" }, "dependencies": { "react": "^17.0.1", "react-dom": "^17.0.1" } } ``` 这里我们添加了`micro-app`字段，其中包含了子应用的名称、端口、URL、以及入口JS文件的地址。 6. 在子应用项目中运行`npm run dev`启动开发服务器，然后在基座项目中运行`npm start`启动应用程序，即可看到基座应用程序中嵌入了子应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gitblog_00012

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值