我想知道是否有可能构建一个可以嵌入到另一个网站的vuejs组件。问题是该组件会在网站上出现多次,所以我无法访问根元素。我知道在react中实现这一点的方法,但我宁愿在Vue中实现。
u4vypkhs1#
是的,有可能。我很久以前创建了这个项目https://github.com/lmarqs/odw-form。目标是创建可嵌入到其他网站的组件。它是用vue-browser创建的,但我不得不适应它。基本上,我创建了一个新的入口文件到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文件夹中。
npm run build
/dist
byqmnocz2#
我知道,我没有回答你的问题,因为你想要的(使用vue组件在另一个网站)。如果你创建一个组件并在Angular、React、Vue等框架中使用它,那就太完美了。你可以用Stencil.js来做。By clicking here你会看到一个关于它的很棒的教程。
b91juud33#
你可以在一个站点中放置多个根元素。每个组件都需要在一个根下呈现。此外,你总是可以通过$root属性访问根。你的问题是什么?
$root
nhjlsmyf4#
值得一提的是vue-custom-element。
pgccezyw5#
多年后,我在google上发现了这个问题,我想为像我一样在这篇文章中结束的其他人提出另一种选择,即web组件。
**浏览器:**https:vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue
它将导出单个vue组件,因此可以通过导入脚本并使用自定义标记<my-component>在任何其他网站上重用它。
<my-component>
5条答案
按热度按时间u4vypkhs1#
是的,有可能。
我很久以前创建了这个项目https://github.com/lmarqs/odw-form。目标是创建可嵌入到其他网站的组件。
它是用vue-browser创建的,但我不得不适应它。
基本上,我创建了一个新的入口文件到webpack(main.prod.js)。这个入口安装Vue上的组件。所以在html中可以创建这样的东西:
字符串
创建新条目后,我在webpack.base.conf.js上设置了该条目
型
然后,运行
npm run build
命令,将可嵌入的css和js文件创建到/dist
文件夹中。byqmnocz2#
我知道,我没有回答你的问题,因为你想要的(使用vue组件在另一个网站)。
如果你创建一个组件并在Angular、React、Vue等框架中使用它,那就太完美了。你可以用Stencil.js来做。
By clicking here你会看到一个关于它的很棒的教程。
b91juud33#
你可以在一个站点中放置多个根元素。每个组件都需要在一个根下呈现。此外,你总是可以通过
$root
属性访问根。你的问题是什么?nhjlsmyf4#
值得一提的是vue-custom-element。
pgccezyw5#
多年后,我在google上发现了这个问题,我想为像我一样在这篇文章中结束的其他人提出另一种选择,即web组件。
**浏览器:**https:vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue
它将导出单个vue组件,因此可以通过导入脚本并使用自定义标记
<my-component>
在任何其他网站上重用它。