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

我想知道是否有可能构建一个可以嵌入到另一个站点中的vuejs组件。问题是这个组件会在网站上出现好几次，所以我无法访问根元素。我知道在react中实现这一点的方法，但我更愿意在Vue中实现。

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

$root

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

是的，这是可能的

我很久以前就创建了这个项目。其目的是创建嵌入到其他站点的可嵌入组件

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

基本上，我为网页创建了一个新的条目文件（）。此条目将在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>

---

然后，运行

npm run build

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

/dist

文件夹中。

我知道，我并没有按照您的要求回答您的问题（在另一个站点中使用vue组件）

如果您创建一个组件并在Angular、React、Vue等框架中使用它，这将是完美的。您可以使用

---

你会看到一个很棒的教程。

也许值得一看

如果我想有多个实例，每个

我都可以

var-app1=new-Vue（{el:“app1”}），
var-app2=新的Vue（{el:“app2”}）和相同组件的不同实例。有多个实例会影响性能吗？我从来没有任何性能问题。运行
npm run build
将模板传输到渲染函数（与react上使用的概念相同）。那些渲染功能真的很轻。看起来棒极了！谢谢是的，我知道，我更新了我的答案，这样你就可以看到Academicind制作的很棒的教程。
module.exports = {
  entry: {
    main: isProduction ? ["./src/main.prod.js"] : ["./src/main.js"]
  }
}