Vue.JS - 微前端方法 [英] Vue.JS - micro frontend approach

问题描述

我们的团队正在开发一个大型项目，我们希望构建一个包含多种表单和仪表板及功能的大型应用程序。一个整体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 monolith SPA would get complicated. So we discuss the approach of „micro frontends architect". The goal is to generate a parent SPA which contains several child SPAs. All SPA should be of same framework (vueJS).

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

The idea behind this approach (https://micro-frontends.org/)

• 网络应用程序是一个功能组合由独立团队拥有的


• 团队拥有独特的业务领域


• 团队是跨职能的，并开发了端到端的功能从数据库到用户界面


• 类似自包含系统

• a web app is a composition of features which are owned of independent teams
• a team has a distinct area of business
• 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

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

我们想要在我们的前端使用：

What we want to use in our frontend:

• vue

• vue

vue-rout呃

vue-resource

vue-resource

vue-loader

vue-loader

webpack

我们的问题：

1）是否可以使用标准vue工具基于vue创建复合UI（微前端）？

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）我们有多个页面，所以我们需要一个从一侧导航到另一侧的解决方案。我们如何实现页面转换？

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）是否可以在VueJS组件之间建立事件总线？

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

4）我们如何在组件之间实现双向通信？

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

- Parent-Child Communication
- Child-Parent Communication

推荐答案

1）是否可以使用标准vue工具基于vue创建复合UI（微前端）？

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

是的，它是可能的。您看到的几乎所有独立组件都已发布（ https://github.com/sagalbot/vue-select， https://github.com/NightCatSama/vue-slider-component ）甚至完整的组合组件（如vuetify， https://github.com/bootstrap- vue / bootstrap-vue ，vue-material）是使用标准vue工具开发的可重用（可组合）组件的示例。

Yes, it is possible. Pretty much any independent component you see published around (https://github.com/sagalbot/vue-select, https://github.com/NightCatSama/vue-slider-component) and even full "sets" of components (such as vuetify, https://github.com/bootstrap-vue/bootstrap-vue, vue-material) are examples of reusable (composable) components developed using standard vue tools.

2）我们有多个页面，因此我们需要一个从一侧导航到另一侧的解决方案。我们如何实现页面转换？

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?

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

vue-router is the tool for this job. It is developed by the core team, so expect tight integration and great feature support.

3）是否可以建立事件总线在VueJS组件之间？

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

每个Vue实例实现 events interface 。这意味着要在两个Vue实例或组件之间进行通信，您可以使用 自定义活动 。您也可以使用Vuex（见下文）。

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).

4）我们如何在组件之间实现双向通信？

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

将数据从父组件发送到子组件的最佳方法是使用道具 。步骤：（1）声明道具（数组或对象）; （2）通过< child：name =variableOnParent> 将其传递给孩子。请参阅下面的演示。

The best way to send data from parent component to child is using props. Steps: (1) Declare props (array or object) in the child; and (2) Pass it to the child via <child :name="variableOnParent">. See demo below.

Vue.component('child-comp', {
  props: ['message'], // declare the props
  template: '<p>At child-comp, using props in the template: {{ message }}</p>',
  mounted: function () {
    console.log('The props are also available in JS:', this.message);
  }
})

new Vue({
  el: '#app',
  data: {
    variableAtParent: 'DATA FROM PARENT!'
  }
})

<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>

<div id="app">
  <p>At Parent: {{ variableAtParent }}</p>
  <child-comp :message="variableAtParent"></child-comp>
</div>

您还可以参考引用rel =noreferrer>子组件（ ref s）并调用它们的方法。

You can also get references for Child Components (refs) and call methods on them.

Vue.component('my-comp', {
  template: "#my-comp-template",
  props: ['name'],
  methods: {
    saveMyComp() {
      console.log('Saved:', this.name);
    }
  }
})

new Vue({
  el: '#app',
  data: {
    people: [{name: 'Bob'}, {name: 'Nelson'}, {name: 'Zed'}]
  },
  methods: {
    saveChild(index) {
      this.$refs.myComps[index].saveMyComp();
    }
  }
});

<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>

<div id="app">
  <div v-for="(person, index) in people">
    <button @click="saveChild(index)">saveMyComp</button>
    <my-comp :name="person.name" ref="myComps"></my-comp>
  </div>
</div>

<template id="my-comp-template">
    <span> {{ name }} </span>
</template>

要将从孩子传达给父母，您将使用 活动 。见下面的演示。还有几个修饰符，使这项任务更容易。

To communicate from child to parent, you'll use events. See demo below. There are also several modifiers that make this task easier.

var parent = {
  template: '<div><child :content.sync="localContent"></child><br>At parent: {{ localContent }}</div>',
  props: ['content'],
  data() {
    return {
      localContent: this.content
    }
  }
};

var child = {
  template: '<div>At child: {{ content.value }}<button @click="change">change me</button></div>',
  props: ['content'],
  methods: {
    change() {
      this.$emit('update:content', {value: "Value changed !"})
    }
  }
};

Vue.component('child', child);
Vue.component('parent', parent);

new Vue({
  el: '#app'
});

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>

<div id="app">
  <parent :content="{value:'hello parent'}"></parent>
</div>

但是，随着应用程序的增长，您将不得不使用更具伸缩性的方法。在这种情况下， 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 - 微前端方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！