javascript – Vue.JS – 微前端方法

2023-08-18 22:34:58

我们的团队正在开发一个大型项目,我们希望构建一个包含多种表单和仪表板和功能的大型应用程序.一个整体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-router
> vue-resource
> vue-loader
> 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

解决方法:

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工具开发的可重用(可组合)组件的示例.

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是这项工作的工具.它由核心团队开发,因此期望紧密集成和强大的功能支持.

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

每个Vue实例都实现了events interface.这意味着要在两个Vue实例或组件之间进行通信,您可以使用Custom Events.您还可以使用Vuex(参见下文).

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

将数据从父组件发送到子组件的最佳方法是使用props.步骤：(1)在子组件中声明props(array或object); (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>

您还可以获取Child Components (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>

要从孩子到父母进行交流,您将使用events.请参阅下面的演示.还有several modifiers使这项任务更容易.

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的抽象很少.与其他框架相比,我认为这是一个重要的奖励.

码农公寓

相关文章