micro-frontend相关内容

URL路由哈希在单Spa微前端角度应用中的应用

我正在尝试使用单SPA库将我的应用程序实现为微前端。 应用程序的文件夹结构如下: 微前端 根应用 导航栏应用程序(角度应用程序) 仪表板应用程序(角度应用程序) 服务APP(角度应用) 我已经在服务器中部署了相同的服务器,网站工作正常。 服务器(/var/www/html/)中的文件夹结构如下 主页(根)[url:https://microfrontendapp.com/ ..

如何在微前端场景中共享状态?

第一个想法可能是cookie,但是您可能很快就会用完空间。 推荐答案 在微前端中进行通信有多种方法。 如前所述,不同的微前端应该是松散耦合的,因此您永远不会从一个到另一个直接交谈。 关键问题是:您的微前端解决方案是服务器端还是客户端? 对于客户端,我在通信中写了an article。 如果您是在服务器端(由于提到Cookie,问题似乎指向这个方向),那么我建议您 ..
发布时间:2022-02-28 09:56:45 其他开发

如何在微前端架构中共享 redux store?

我正在尝试按照 微前端 文章.我正在为每个 MFE(微前端)创建多个存储库,并为应用程序使用 Redux.我有以下架构: Frame - 一个集中式(主)存储库,负责根据路由呈现主要应用程序部分和 MFE(我使用的是 connected-react-router).它初始化 Redux 存储并添加一个 injectReducer 函数来动态添加减速器,如 redux 中的代码拆分 文档.该框 ..
发布时间:2021-12-29 11:43:17 其他开发

Vue.JS 的微前端方法

我们的团队正在开发一个大型项目,我们希望构建一个具有多种表单、仪表板和功能的大型应用.一个整体式 SPA 会变得复杂.所以我们讨论“微前端"架构的方法.目标是生成一个包含多个子 SPA 的父 SPA.所有 SPA 都应该使用相同的框架:vueJS. 背后的想法:微前端s 网络应用由独立团队拥有的功能组合而成 一个团队有一个独特的业务领域 该团队是跨职能的,负责开发从数据库到用户界面 ..
发布时间:2021-12-08 21:56:41 前端开发

如何使用 Webpack 创建与容器应用程序共享库的微前端包?

我有一个任务. 拥有带有单spa框架的微前端. 门户/主应用程序(通过 url 加载所有其他 js 代码) 微前端 1(基于 React) 微前端 2(基于 React) 所以我的问题只是一个:我不想复制像 react、react-dom(任何其他)这样的供应商库.我想让它们在其他微前端(与 webpack 捆绑在一起)之间共享 我知道拥有一些全局内容是什么不好的做法( ..

如何将 Angular 应用程序嵌入到另一个应用程序中?

我的团队开发了一个 angular 5 应用程序,该应用程序已经投入生产一段时间了,但我们最近的任务是让该应用程序在公司拥有的其他 3 个站点上运行.一个站点是使用 Angular6 构建的 SPA,另一个站点也是使用 Angular5 的 SPA,而另一个站点则使用一些较旧的库,例如 jQuery. 管理层希望我们立即与 Angular5 SPA 集成,因此我们只是将整个应用程序导出为带有 ..

编辑联合模块时由 Webpack-Dev-Server 实时重新加载

我正在开发一款利用 Webpack Module Federation 的微前端的应用. 我的“主持人"应用程序提供了一个登录屏幕和一个带有菜单、页眉和页脚的布局.我的“模块"是我的应用程序的一部分,可通过单击菜单项访问. 虽然我的默认视图是“主机"应用程序,大部分工作将在模块中完成.我面临的问题是,一旦我更改了远程模块的代码 - 应用程序(我正在查看的主机)不会实时重新加载,这使开发 ..

微前端、Web 组件和共享库

所以我正在努力将我公司的应用程序迁移到微前端方法.我们遵循 https://micro-frontends.org/ 中描述的标准.虽然在幕后一切目前都在使用 React,但我们正在用 Web 组件包装东西,以便我们在未来拥有独立于框架的自由和灵活性.我们已经建立并运行了一个工作架构,到目前为止它运行良好.我们甚至在 Web 组件规范之上创建了一个漂亮的兼容层,它允许我们将类似 React 的 p ..
发布时间:2021-09-22 20:24:01 其他开发

微前端/Web 组件/Vue 路由器错误:未捕获的类型错误:无法重新定义属性:$router

我遇到了一个问题,下面是场景: 我开发了一个 vue 应用程序(my-admin 微应用程序),它有 4 - 5 个屏幕/组件(管理用户、管理通知、管理角色等),我创建了一个 路由器.js 我在其中写了以下内容: ...导入...Vue.use(VueRouter);//}const 路由 = [{小路: '/',name: '主布局',组件:主布局,孩子们:[{路径:'管理用户',nam ..

用于微前端方法的 Vue.JS

我们的团队正在开发一个大型项目,我们希望构建一个具有多种表单、仪表板和功能的大型应用.一个整体式 SPA 会变得复杂.所以我们讨论“微前端"架构的方法.目标是生成一个包含多个子 SPA 的父 SPA.所有 SPA 都应该使用相同的框架:vueJS. 背后的想法:微前端s 网络应用由独立团队拥有的功能组合而成 一个团队有一个独特的业务领域 该团队是跨职能的,负责开发从数据库到用户界面 ..
发布时间:2021-09-20 18:53:05 前端开发

如何将有角度的应用程序嵌入另一个应用程序?

我的团队开发了一个已投入生产一段时间的Angle 5应用程序,但最近我们受命让该应用程序在公司拥有的其他3个站点上运行.一个站点是使用Angular6构建的SPA,另一个站点也是SPA,但使用Angular5,而另一个站点则使用一些较旧的库,例如jQuery. 管理层希望我们立即与Angular5 SPA集成,因此我们只是将整个应用程序导出为带有子路由的模块,然后让其他应用程序进行引导. ..

通过服务将参数传递给ngOnInit

我刚开始学习有关角度2的问题,我对我认为是否可能的情况有疑问. 我有一个微服务模型,其中有与每个微服务关联的角度应用程序. 微服务1和ng app 1-用于处理交易 用户 服务2和ng应用2-用于计算用户的所有适用税金 如果我进入应用程序1,输入交易明细,然后单击继续按钮,我应该能够将税收计算所需的值与用户ID一起传递给“全部"? 通过URL传递应该可以,但是我有用户ID ..
发布时间:2020-05-09 20:00:03 其他开发

查看注射容器的角度

我正在尝试为每个后端微服务都提供一个角度模块.因此,当每个模块在使用彼此的组件时(如果可用)以及在容器中找不到该组件的默认“服务不可用"组件时,要保持每个模块的独立性和清洁性. 示例方案:假设有一个销售和会计模块. 销售模块需要一个带有选择器的组件:“总价". 主模块同时使用销售模块和会计模块,但是销售人员不了解会计. 当我在销售中调用“总价"标签时,我希望主模块在会计中找到它并在销售中显示 ..

如何使用Webpack创建与容器应用程序共享库的Micro Frontend捆绑软件?

我有任务. 具有带有单spa框架的Micro Frontends. 门户/主应用程序(通过网址加载所有其他js代码) Micro Frontend 1(基于反应) Micro Frontend 2(基于反应) 所以我的问题只有一个:我不想复制供应商库,例如react,react-dom(其他任何库).而且我想让它们在其他Micro Frontends(与webpack捆绑在一 ..

Vue.JS - 微前端方法

我们的团队正在开发一个大型项目,我们希望构建一个包含多种表单和仪表板及功能的大型应用程序。一个整体SPA会变得复杂。所以我们讨论“微前端架构师”的方法。目标是生成包含多个子SPA的父SPA。所有SPA应该是相同的框架(vueJS)。 这种方法背后的想法( https://micro-frontends.org/ ) 网络应用程序是一个功能组合由独立团队拥有的 团队拥有独特的业务领域 ..
发布时间:2019-06-06 01:30:06 前端开发