Question

我想知道是否有可能构建一个可以嵌入到另一个站点的vuejs组件。事情是组件会在网站上出现几次，所以我无法访问根元素。我知道一种方法可以做出反应，但我宁愿在Vue中这样做。

Answer 1

是的，这是可能的。

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

它是使用vue-cli创建的，但我必须适应它。

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

<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
来完成它

By clicking here你看到了一个很棒的教程。

Answer 3

您可以在一个站点中放置多个根元素。每个组件都需要在根目录下呈现。此外，您始终可以通过$root属性访问根目录。你有什么问题？

Answer 4

可能值得关注allowed

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

4 个答案: