Vue.JS - 微前端方法

Question

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

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

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

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

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

2)CanopyTax with single-spa - > 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

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

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

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

海盗

Piral.io（遵循微前端架构的门户应用程序框架）仍在开发中，它主要针对React（另一个 JS 前端框架）。

Vue方法

我能够想出一个方法，并希望尽快写一篇关于这个的中等文章，但是暂时

1. 您可以使用 Vue将应用程序的每个部分构建为一个独立的Web 组件。一个很好的起点是Create & Publish Web Components With Vue CLI 3 - Vue.js Developers。
2. 您可以使用vue-router进行页面转换：通过动态路由匹配（例如/apps/:app_name），您可以适当地加载子应用程序。在每个子应用程序中，您也可以拥有一个路由系统
3. 作为 Event-Bus ，最近的浏览器中有BroadcastChannel，可用于跨子应用程序发送消息。该广播信道API可能是足智多谋。
4. BroadcastChannel可以处理双向通信。

如果您想，上述方法最有效：

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

Answer 2

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

对的,这是可能的.几乎你看到周围出版(任何独立成分https://github.com/sagalbot/vue-select,https://github.com/NightCatSama/vue-slider-component)和组件的甚至是全"套"(如as vuetify,https://github.com/bootstrap-vue/bootstrap-vue,vue- material)是使用标准vue工具开发的可重用(可组合)组件的示例.

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

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

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

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

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

将数据从父组件发送到子组件的最佳方法是使用props.步骤:(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>

您也可以参考的子组件(refS)并在其上调用方法.

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时,您不必将状态从父级传递给子级:所有这些都将从Vuex存储中获取它(一种"全局"反应变量).这极大地简化了应用程序管理,值得自己发布.

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