用于微前端方法的 Vue.JS

问题描述

我们的团队正在开发一个大型项目，我们希望构建一个具有多种表单、仪表板和功能的大型应用.一个整体式 SPA 会变得复杂.所以我们讨论微前端"架构的方法.目标是生成一个包含多个子 SPA 的父 SPA.所有 SPA 都应该使用相同的框架:vueJS.

Our team is developing a large project and we want to build a big app with multiple forms and dashboards and features. One monolithic SPA would get complicated. So we discuss the approach of „micro frontend" architecture. The goal is to generate a parent SPA which contains several child SPAs. All SPAs should use the same framework: vueJS.

• 网络应用由独立团队拥有的功能组合而成
• 一个团队有一个独特的业务领域
• 该团队是跨职能的，负责开发从数据库到用户界面的端到端功能
• 就像一个独立的系统

我们发现了一些支持这一点的实现:

We found some implementations supporting this:

1. 微前端
2. CanopyTax 的单一 SPA

我们想在我们的前端(vue、vue-router、vue-resource、vue-loade、webpack)中使用 VueJS

We want to use VueJS in our frontend (vue, vue-router, vue-resource, vue-loade, webpack)

1. 复合 UI(即微前端)与 VueJS(标准 Vue 工具)是否可行，是否有示例项目?
2. 我们有多个页面，因此我们需要一个解决方案来从一侧导航到另一侧.我们如何实现页面转换?
3. 是否可以在 VueJS 组件之间建立一个事件总线?
4. 我们如何在组件(父子、子父)之间实现双向通信?

1. Is a composite UI (i.e. Micro Frontend) feasible with VueJS (standard Vue-tools), are there 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 an Event-Bus between the VueJS components?
4. How can we implement a bidirectional communication between the components (parent-child, child-parent)?

推荐答案

可行性:复合 UI

1. 是否可以使用标准的 vue 工具创建基于 vue 的复合 UI(微前端)?

是的，这是可能的.您看到的几乎所有独立的 Vue 组件(vue-select、vue-slider-component 甚至完整的集合"组件，例如 vuetify、bootstrap-vue 或 vue-material使用标准 Vue 工具开发的可重用(可组合)组件示例.

1. 我们有多个页面，因此我们需要一个解决方案来从一侧导航到另一侧.我们如何实现页面转换?

vue-router 是这项工作的工具.它由核心团队开发，因此需要紧密集成和强大的功能支持.

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

1. 是否可以在 VueJS 组件之间建立一个 Event-Bus?

每个 Vue 实例都实现了一个事件接口.这意味着要在两个 Vue 实例或组件之间进行通信，您可以使用 自定义事件.你也可以使用 Vuex(见下文).

1. 我们如何实现组件之间的双向通信?

从父组件向子组件发送数据的最佳方式是使用道具.步骤:

Every Vue instance implements an events interface. This means that to communicate between two Vue instances or components you can use Custom Events. You can also use Vuex (see below).

1. 声明props(数组或对象) 在孩子身上
2. 通过 将其传递给孩子.

见下面的演示:

See demo below:

您还可以获得的引用子组件 (refs) 并在其上调用方法.

<模板 id="my-comp-template"><跨度>{{名称}} </span></template>

要从孩子到家长，您将使用事件.请参阅下面的演示.还有几个修饰符可以让这个任务更容易.

但是，不可避免地，随着您的应用程序的增长，您将不得不使用更具可扩展性的方法.在这种情况下，Vuex 是事实上的解决方案.粗略地说，当使用 Vuex 时，您不必将状态从父级传递给子级:所有这些都将从 Vuex 存储(某种全局"反应变量)中获取它.这大大简化了应用程序管理，值得自己发一个帖子.

Inevitably, though, as your application grows, you will have to use a more scalable approach. Vuex is the de facto solution in this case. Roughly, when using Vuex, you won't have to pass state around from parent to child: all of them will pick it up from the Vuex store (sort of a "global" reactive variable). This greatly simplifies the application management and is worth a post of its own.

最后一点:如您所见，Vue 的一大优势是您可以轻松地进行原型设计和测试功能.没有构建步骤，对原始 JS 的抽象很少.与其他框架相比，我认为这是一个重要的好处.

Final note: As you can see, one great advantage of Vue is how easy you can prototype and test functionality. No build step, few abstractions over raw JS. Compared to other frameworks, I'd say this is an important bonus.

这篇关于用于微前端方法的 Vue.JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！