用于微前端方法的Vue.JS

Question

我们的团队正在开发一个大型项目，我们希望构建一个包含多种表单、仪表板和功能的大型应用程序。一个单一的SPA会变得复杂。因此，我们讨论了“微前沿”建筑的方法。目标是生成一个包含多个子SPA的父SPA。所有SPAs都应该使用相同的框架: vueJS。

想法背后：微锋的

• web应用程序是由独立团队拥有的特性组成的。
• 一个团队有一个独特的业务领域。
• 该团队是跨功能的，并从数据库到用户界面进行端到端的功能开发。
• 就像一个独立的系统

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

1. 微锋
2. 单SPA of CanopyTax

我们想在我们的前端使用VueJS (vue，vue-路由器，vue-resource，vue-loade，webpack)

问题

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

Answer 1

可行性:复合UI

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

是的，这是可能的。几乎所有你看到的独立的Vue组件都是使用标准Vue工具开发的可重用(可组合)组件的例子(vue-选择，滑块部件，甚至完整的组件“集合”)，比如vuetify、引导-vue或Vue材料。

页面转换:路由

1. 我们有多个页面，所以我们需要一个解决方案从一个页面导航到另一个页面。如何实现页面转换？

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

事件总线

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

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

双向通信

1. 如何实现组件之间的双向通信？

从父组件向子组件发送数据的最佳方法是使用 道具。步骤：

1. 在子表中声明props (数组或对象)
2. 通过<child :name="variableOnParent">传递给孩子。

见下面的演示：

​

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>

​

您还可以获得用于的引用，并在它们上调用方法。

​

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>

​

要将从子传递到父，您将使用事件。见下面的演示。还有一些几个修饰符可以使这个任务变得更容易。

​

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商店(某种程度上是一个“全局”的反应性变量)获取状态。这极大地简化了应用程序管理，并且值得自己做一个职位。

最后注意事项：如您所见，Vue的一个很大的优点是您可以很容易地实现原型和测试功能。没有构建步骤，对原始JS的抽象也很少。与其他框架相比，我认为这是一个重要的好处。

Answer 2

我一直在好奇地寻找一种快速实现微前端架构的方法。我发现的一些很好的资源是：

• micro-frontends.org：构建一个由多个团队组成的现代化web应用程序的技术、策略和配方，这些团队可以独立发布功能。
• Single-SPA.js：用于前端微服务的Javascript路由器

然而，我遇到的问题是设置的复杂性。我喜欢很快看到结果。

皮拉尔

Piral.io (遵从微前端体系结构的门户应用程序框架)仍然处于开发阶段，它主要针对React (另一个JS前端框架)。

Vue方法

我想出了一种方法，并希望能在不久的将来写一篇关于这方面的文章，不过暂时是这样的。

1. 您可以使用Vue将应用程序的每个部分构建为一个独立的组件。使用Vue CLI 3- Vue.js开发人员创建和发布Web组件是一个很好的起点。
2. 您可以使用vue路由器进行页面转换:通过动态路由匹配(例如/apps/:app_name)，您可以酌情加载子应用程序。在每个子应用程序中，您还可以设置一个路由系统。
3. 作为事件总线，在最近的浏览器中有BroadcastChannel，它可以用来在子应用程序之间发送消息。广播频道API可以是足智多谋的。
4. BroadcastChannel可以处理双向通信.

如果您想：

1. 让单独的团队使用他们最熟悉的任何工具。
2. 添加新的应用程序，即使在没有停机的生产中。