Question

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

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

网络应用程序是由独立团队拥有的功能组合
团队拥有独特的业务领域
该团队具有跨职能，并从数据库到用户界面开发了端到端的功能
就像自包含系统

我们已经找到了这种方法的一些实现

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

2）CanopyTax with single-spa - ＆gt; https://github.com/CanopyTax/single-spa

我们想在前端使用什么：

VUE
VUE路由器
VUE资源
VUE装载机
的WebPack

我们的问题：

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

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

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

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

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

- Parent-Child Communication
- Child-Parent Communication

Answer 1

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

是的，有可能。几乎你看到的任何独立组件（https://github.com/sagalbot/vue-select，https://github.com/NightCatSama/vue-slider-component）甚至是完整的＆＃34;设置＆＃34;组件（例如vuetify，https://github.com/bootstrap-vue/bootstrap-vue，vue-material）是使用标准vue工具开发的可重用（可组合）组件的示例。

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

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

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

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

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

将数据从父组件发送到子组件的最佳方法是使用props 。步骤：（1）在孩子中声明props（数组或object）; （2）通过<child :name="variableOnParent">传递给孩子。见下面的演示。

＆＃13;

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!'
  }
})

＆＃13;

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

＆＃13;

您还可以获取Child Components (refs)的参考并在其上调用方法。

＆＃13;

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();
    }
  }
});

＆＃13;

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

＆＃13;

要将从孩子传达给父母，您将使用events。见下面的演示。还有several modifiers使这项任务更容易。

＆＃13;

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'
});

＆＃13;

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>

<div id="app">
  <parent :content="{value:'hello parent'}"></parent>
</div>

＆＃13;

但是，不可避免的是，随着应用程序的增长，您将不得不使用更具伸缩性的方法。在这种情况下，Vuex是事实上的解决方案。粗略地说，当使用Vuex时，您不必将状态从父级传递给子级：所有这些都将从Vuex存储中获取它（类似于＆＃34;全局＆＃34;反应变量）。这极大地简化了应用程序管理，值得自己发布。

最后的注释：正如您所看到的，Vue的一大优势是您可以轻松地进行原型设计和测试功能。没有构建步骤，对原始JS的抽象很少。与其他框架相比，我说这是一个重要的奖励。

Answer 2

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

我能够想出一种方法，希望很快就此发表一篇中等文章，

使用Vue，您可以将应用程序的每个部分构建为独立的WebComponent，this article是一个不错的起点。
您可以使用vue-router，并通过动态路由匹配（例如/apps/:app_name）来加载相应的子应用程序。在每个子应用程序中，您还可以使用一个路由系统
在最近的浏览器中，可以使用BroadcastChannel来跨子应用程序发送消息。 This可能很聪明。
BroadcastChannel可以处理双向通信。

如果您愿意，此方法最有效：

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

Vue.JS - 微前端方法

2 个答案: