Vue js 作为另一个站点上的小部件

Question

我想知道是否可以构建一个可以嵌入到另一个站点的 vuejs 组件。问题是该组件会在网站上多次显示，因此我无法访问根元素。我知道一种方法可以在 React 中做到这一点，但我宁愿在 Vue 中做到这一点。

Answer 1

是的，这是可能的。

我很久以前创建了这个项目https://github.com/lmarqs/odw-form。目标是创建可嵌入到其他站点的组件。

它是使用 vue-cli 创建的，但我必须对其进行调整。

基本上，我为 webpack 创建了一个新的入口文件（main.prod.js）。本条目在 Vue 上安装组件。所以在 html 中可以创建这样的东西：

<div id="app-1">
  <my-component1></my-component1>
  <my-component2></my-component2>
</div>
<div id="app-2">
  <my-component1></my-component1>
  <my-component2></my-component2>
</div>
<script>
  var app1 = new Vue({
    el: "app-1"
  });

  var app2 = new Vue({
    el: "app-2"
  });
</script>

创建新条目后，我在 webpack.base.conf.js

上设置了该条目

module.exports = {
  entry: {
    main: isProduction ? ["./src/main.prod.js"] : ["./src/main.js"]
  }
}

然后，运行

npm run build

命令，可嵌入的 css 和 js 文件将创建到

/dist

文件夹中。

Answer 2

我知道，我没有按照你想要的方式回答你的问题（在另一个站点中使用 vue 组件）。

如果你创建一个组件并在 Angular、React、Vue 等框架中使用它那就完美了。你可以使用 Stencil.js

通过单击此处，您会看到有关它的精彩教程。

Answer 3

您可以在一个站点中放置多个根元素。每个组件都需要在根下渲染。此外，您始终可以通过

$root

属性访问根目录。你有什么问题？

Answer 4

可能值得关注 vue-custom-element

Answer 5

几年后我在谷歌上发现了这个问题，我想为像我这样最终发表这篇文章的人提出另一种选择。即 Web 组件。

Vue 文档： https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue

它将导出单个 vue 组件，以便通过导入脚本并使用您的自定义标签在任何其他网站上重复使用它

<my-component>

。