Question

我有许多小型项目，它们是主站点的子应用程序，每个项目都在其父项目下的子域中的自己的容器中提供。

这对我的问题并不是很重要，只是为了增加上下文：主站点是一个古老的Drupal 7怪物，它通过json公开了该站点的页眉和页脚的链接和结构。这些链接和结构并没有多少变化，但是足够使子应用程序能够轻松地更新自己的版本。

大多数“儿童应用”是用Vue＆React编写的非常简单的单页应用。

当前，它们只有3个项目，但是今年这个数字将会增长，所以我想知道是否有办法创建一个负责构建从Drupal检索数据的页眉和页脚的项目，并且然后在每个Vue或React应用程序中重新利用该项目。

这可行吗？哪个框架对此更好？

Answer 1

Web组件是实现所需功能的最简单方法。将页眉和页脚编写为Web组件。这样，将其轻松集成到Vue / React应用程序中即可。您既可以使用简单的Web组件，也可以使用更好的抽象，例如Stencil或Lit-Element。

您将需要polyfill支持所有浏览器。例如，无论何时您的子应用需要更新页眉或页脚，它都可以像这样捕获Web组件实例：

const header = document.querySelector("#app-header");

当然，这不是一种完全声明式的处理方式。如果需要声明性方法，则实际上可以在Vue和React中创建一个Layout组件，并在Layout JSX / template中使用您的Web组件。

作为类似行上的一个可选扩展，您的Layout组件可以是另一个Web组件，该组件呈现页眉和页脚组件以及迷你子应用程序。因此，您可以避免创建多个框架特定的布局组件。但是，对于您的情况，我认为没有必要。