Vue.JS-微型前端方法

JavaScript Vue.js

蛋蛋猿

2020-04-03

我们的团队正在开发一个大型项目，我们希望构建一个具有多种形式，仪表板和功能的大型应用程序。一个整体式SPA将变得复杂。因此，我们讨论“微型前端架构师”的方法。目标是生成一个包含多个子SPA的父SPA。所有SPA应该具有相同的框架（vueJS）。

这种方法背后的想法（https://micro-frontends.org/）

  • Web应用程序是由独立团队拥有的功能的组合
  • 团队具有独特的业务领域
  • the team is cross functional and developed its feature end-to-end from database to user-interface
  • its like Self contained systems

We have found some implementations of this approach

1) https://micro-frontends.org/

2) CanopyTax with single-spa -> https://github.com/CanopyTax/single-spa

What we want to use in our frontend:

  • vue

  • vue-router

  • vue-resource

  • vue-loader

  • webpack

Our Questions:

1) Is it possible to create a composite UI (micro front end) based on vue by using standard vue tools?

- we are not sure how doable is it with VueJS
- there may already be example projects?

2) We have more than one page, so we need a solution to navigate from one side to another. How can we realize page transitions?

3) Is it possible to established a Event-Bus between the VueJS components?

4) How can we implement a bidirectional communication between the components?

- Parent-Child Communication
- Child-Parent Communication

第3988篇《Vue.JS-微型前端方法》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
伽罗猪猪理查德 2020.04.03

我一直在寻找一种快速的方法来实现微前端架构。我发现了一些不错的资源：https : //micro-frontends.org/和https://single-spa.js.org/，但是我遇到的问题是设置复杂性...我希望看到结果相当快。https://piral.io仍处于开发阶段，主要针对反应，但这是我的发现。

我能够提出一种方法，希望很快就此撰写一篇中等文章，但是暂时

  1. 您可以使用Vue将应用程序的每个部分构建为独立的WebComponent，这篇文章是一个很好的起点。
  2. 您可以使用vue-router，并使用动态路由匹配（例如/apps/:app_name）来适当加载子应用程序。在每个子应用程序中，您也可以使用一个路由系统
  3. 在最近的浏览器中，可以使用BroadcastChannel来跨子应用程序发送消息。这可能很足智多谋。
  4. BroadcastChannel可以处理双向通信。

如果您要：

  1. 让独立的团队使用他们最喜欢的任何工具。
  2. 即使在没有停机的情况下，也可以添加新的应用程序。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android