javascript - 在非 Vue Web 应用程序中嵌入 Vue 应用程序(或 Vue Web 组件)
问题描述
我是 Vue 的新手,我的任务是创建一些 Vue 小部件,这些小部件可以嵌入到几个现有的非 Vue 遗留 Web 应用程序中。我们的想法是,我们将创建一个包含这些小部件的库,然后可以将其嵌入到任一遗留应用程序中,最终我们可能会将整个应用程序迁移到 Vue。
我一直在寻找最好的前进方式,我有点困惑。我想这些是我的问题:
我是否需要在这里考虑 Web 组件,或者这些小部件可以是我们以某种方式嵌入的实际 Vue 应用程序?
如果应该将小部件创建为 Web 组件,那么使用 Vue/web-component-wrapper 或 vue-custom-element 库有什么区别吗?
无论我们选择哪个选项,我们都能充分利用您在任何普通 Vue 应用程序中使用的特性——Vue 路由器、用于状态管理的 Vuex 等(并且可以在这些小部件之间共享状态)?
小部件是否需要完全样式化,或者将组件的所有样式留给父应用程序(或两者的组合)是否是最佳实践?
我以前从来没有做过这样的事情(你可能会说!)所以任何指导或建议或指向示例的指针都将不胜感激。
** 更新 **
我发现这篇文章我认为这是我需要在https://itnext.io/vuidget-how-to-create-an-embeddable-vue-js-widget-with-vue-custom-element-674bdcb96b97中进行的方向
解决方案
有三种不同(但非常相似)的情况:
web components
它们应该是一个封装的 Web 片段。如果您愿意,它是<iframe>
s 的更智能替代品。它的主要用例(以及它的设计目的)是在页面中显示广告并保证主机不会弄乱其内部逻辑和渲染。custom elements
简单地说,这些就是声明和注册的自定义 HTML 标记。使用它们的好处是能够在任何外部框架中将它们标记为禁止使用,并说明: “此自定义元素不是您的自定义组件之一,请将其视为 HTML 标记”。framework components
默认情况下,现代 JS 框架(Angular、React、Vue)在内部使用这种模式:它们的内部组件看起来像自定义元素(案例 2)。但他们不是。它们只是内部约定,从未进入应用程序的 HTML 标记输出。
以下是内部发生的情况:解析模板时,如果遇到未知的 HTML 元素,框架会假定它是其注册组件之一。如果是,则不呈现标签。该组件的一个新实例被创建,标签被替换为组件模板的内容(或其渲染函数的结果)。
所有上述框架,当遇到不是注册自定义组件的未知 html 标签时,将发出警告,如下所示“咦,你是不是忘记注册这个组件了?” . 除非它被注册为自定义元素(案例 2)——在这种情况下,他们将其视为:HTML 标记。
Vue 优雅地处理了上述所有问题。您为小部件选择的内容很大程度上取决于上下文和所需的最终结果。
以下是您的问题的答案:
- 我是否需要在这里考虑 Web 组件,或者这些小部件可以是我们以某种方式嵌入的实际 Vue 应用程序?
如果您希望能够根据上下文设置样式,则不应使用 Web 组件。
@vue/web-component-wrapper
如果应该将小部件创建为 Web 组件,那么使用或vue-custom-element
库之间有什么区别吗?
就在这里。@vue/web-component-wrapper
生成 Web 组件(封装的 DOM 框架)。
vue-custom-elements
声明和使用自定义元素(自定义 HTML 标记)。它们的内容是 HTML 标记(未封装)。使用自定义元素的优点是能够通知外部框架:不要将此自定义元素视为您自己的组件之一,它由其他东西处理(在我们的例子中是 Vue)。将其视为 HTML 标记。
- 无论我们选择哪个选项,我们都能充分利用您在任何普通 Vue 应用程序中使用的特性——Vue 路由器、用于状态管理的 Vuex 等(并且可以在这些小部件之间共享状态)?
是的。无论您选择哪个选项,您仍在使用 JavaScript(每个小部件/应用程序都可以不受限制地访问整个上下文)。您还可以将依赖项注入到您的小部件中,允许它们进行通信(通过修改相同的外部依赖项 - 路由器、状态管理模块等......)。这几乎是每个 Vue 实例正常运行的标准模式。简单来说,Vue(子)组件可以在没有父组件的情况下运行,本质上是一个 Vue 应用程序。(或者,如果您愿意,每个 Vue 应用程序都是一个 Vue 实例,并且它的所有子组件也是 Vue 实例)。
- 小部件是否需要完全样式化,或者将组件的所有样式留给父应用程序(或两者的组合)是否是最佳实践?
这完全是您的代码设计选择。在 Vue 中定义CSS 范围很容易。但是从上面的样式(DRY-er 代码)有很大的优势。此外,来自上下文的样式意味着应用较少的 CSS 规则,尽管这几乎不能算作性能问题。显然,考虑到第一个问题的答案。
推荐阅读
- html - Blogger 页面喜欢联系我们在页面的一半上显示内容
- android - 如何将同级视图约束到与 TextInputLayout 的 TextInputEditText 相同的高度
- html - 如何让产品的标题(Woo-Commerce)以白色文本显示
- xcode - 使用 Xcode 的新构建系统运行预构建步骤
- datastax - 在 cassandra 中选择不同计数的方法是什么?
- javascript - 如何从具有公共键:值对的对象数组中创建单个对象
- python - 从 Python 中将文件名传递给子进程
- mongodb - 当我在 docker 上运行 Jenkins 的作业时无法连接到 MongoDb
- android - 为什么我不能在 build.gradle 中实现设计库
- unity3d - Unity 错误:调试不包含日志的定义。在 Visual Studio Code 中编码,还安装了所需的数据包,但仍然无法正常工作