Javascript 在非Vue Web应用程序中嵌入Vue应用程序（或Vue Web组件）

我对Vue非常陌生，我的任务是创建一些Vue小部件，这些小部件可以嵌入到两个现有的非Vue遗留web应用程序中。我们的想法是，我们将创建这些小部件的库，然后将其嵌入到任何一个遗留应用程序中，最终我们可能会将整个应用程序迁移到Vue

我一直在寻找最好的前进之路，我有点困惑。我想这是我的问题：

我是否需要在这里考虑Web组件，或者小部件是否可以是我们以某种方式嵌入的实际Vue应用程序

如果小部件应该创建为Web组件，那么使用Vue/Web组件包装器和Vue自定义元素库之间有什么区别吗

无论我们选择哪个选项，我们都可以充分利用您在任何普通Vue应用程序中使用的功能—Vue路由器、用于状态管理的Vuex等（并且可以在这些小部件之间共享状态）

小部件是否需要完全设置样式，或者将组件的所有样式都留给父应用程序（或两者的组合）是最佳做法

我以前从未做过类似的事情（你可能会说！），所以任何指导、建议或示例指针都将不胜感激

**更新**

我找到了这篇文章，我认为这是我在这篇文章中需要研究的方向。有三种不同（但非常相似）的情况：

• 
  它们应该是一个封装的web片段。如果您愿意，它是
  s的更智能的替代品。它的主要用例（以及它的设计目的）是在页面中显示广告，并保证主机不会干扰其内部逻辑和呈现

• 
  简单地说，它们是声明和注册的自定义HTML标记。使用它们的优点是能够在任何外部框架中将它们标记为禁止使用，并声明：“此自定义元素不是自定义组件之一，请将其视为HTML标记”

• 框架组件

  
  默认情况下，现代JS框架（Angular、React、Vue）在内部使用此模式：其内部组件看起来像自定义元素（案例2）但它们不是。它们只是内部约定，从未进入应用程序的HTML标记输出。
  以下是内部发生的情况：当解析模板时，如果遇到未知的HTML元素，框架将假定它是其注册的组件之一。如果是，则不呈现标记。将创建该组件的新实例，并将标记替换为组件模板的内容（或其渲染功能的结果）。
  上述所有框架，当运行到一个未知的html标记（该标记不是已注册的自定义组件）时，都会发出警告，提示“嘿，你忘记注册这个组件了吗？”。除非它注册为自定义元素（案例2）——在这种情况下，他们将其视为HTML标记

Vue可以优雅地处理以上所有问题。您为小部件选择什么在很大程度上取决于上下文和期望的最终结果

以下是您问题的答案：

我是否需要在这里考虑Web组件，或者小部件是否可以是我们以某种方式嵌入的实际Vue应用程序

如果希望能够根据上下文对Web组件进行样式设置，则不应使用Web组件

如果小部件应创建为Web组件，那么使用

@vue/Web组件包装器

或

vue自定义元素

库之间有什么区别吗

是的，有

@vue/web组件包装器

生成web组件（封装的DOM框架）。

vue自定义元素

声明并使用自定义元素（自定义HTML标记）。它们的内容是HTML标记（未封装）。使用自定义元素的优点是能够通知外部框架：不要将此自定义元素视为自己的组件之一，它由其他组件处理（在我们的例子中是Vue）。将其视为HTML标记

无论我们选择哪个选项，我们都可以充分利用您在任何普通Vue应用程序中使用的功能—Vue路由器、用于状态管理的Vuex等（并且可以在这些小部件之间共享状态）

对。无论您选择哪个选项，您仍然在使用JavaScript（每个小部件/应用程序都可以不受限制地访问整个上下文）。您还可以将依赖项注入到小部件中，使它们能够通信（通过修改相同的外部依赖项—路由器、状态管理模块等）。这几乎是每个Vue实例正常运行的标准模式。简单地说，Vue（子）组件可以在没有父组件的情况下运行，本质上是Vue应用程序。（或者，如果您愿意，每个Vue应用程序都是Vue实例，其所有子组件也都是Vue实例）

小部件是否需要完全设置样式，或者将组件的所有样式都留给父应用程序（或两者的组合）是最佳做法

---

这完全是您的代码设计选择。在Vue中很容易找到。但是从上面设计样式有很大的优势（干er代码）。此外，使用来自上下文的样式意味着应用较少的CSS规则，尽管这很难被视为性能问题。显然，要考虑第一个问题的答案。

遗留web应用程序的技术堆栈是什么？服务器端（Java/Spring等）或客户端（React等）？感谢您提供了详细的答案-我在这个帖子上找到了您的另一个答案。如果我正确理解了这个答案，那么您正在做我想做的事情，但没有使用web组件包装器或vue自定义元素-对吗？@Richard，是的。这种模式在大多数情况下都有效。然而，也有一些特殊情况