是否可以使用单个文件组件制作可分发的Vue小部件？

Question

这可能是一个奇怪的问题，但我会试着解释一下。

我正在为客户端的Drupal网站构建一个基于vue的视频播放器小部件。我的想法是创建一些他可以插入的东西，比如JQuery插件。但是，我真的很想利用Vue的单个文件组件（使用Webpack），因此我可以将所有内容捆绑在一起。

我的第一个想法是使用Vue CLI，npm build，然后进入dist /文件夹并提取以下信息：

<link href=/static/css/app.cf6f127cf50f4c0b2424d30fdc56c3a4.css rel=stylesheet>

<div id="my-widget"></div>

<script type=text/javascript src=/static/js/manifest.e12c1c4a9566f686d69f.js></script>
<script type=text/javascript src=/static/js/vendor.47037dd92c40b3f38949.js></script>
<script type=text/javascript src=/static/js/app.3f1bab5cc5b1be1127b2.js></script>

---

虽然感觉不舒服，有没有更好的方法来实现这一目标？请记住，他的网站不是Vue应用程序，但我想要像Vue应用程序一样构建这个小部件。

Answer 1

我不知道我是否100％理解，据我所知，这是可能的。无论您如何捆绑您的应用程序。这是一个建筑问题。你可以部分使用vue.js，比如widget。

首先，当您设置Vue实例时，只需使用目标元素设置元素。

new Vue({
    el: '#my-widget'
});

如果您希望客户端自己设置元素，请创建一些函数来创建vue小部件。 （考虑多个vue实例或状态共享等等等等......）

// you can provide simple function like this (I'm sure it needs to be more.)
const Widget = {
    createWidget(el) {
        new Vue({
            el: el
        });
    }
};

// on client side
Widget.createWidget('#his-widget');

在捆绑时，如果您希望将小部件与客户端的Drupal网站捆绑在一起。让他像其他库一样导入你的小部件。您可以使用vue-cli中的npm run build构建您的小部件，然后将其提供给他，以便他可以包含它。

Answer 2

感谢@ yuriy636回答我的问题。 CLI 3.0允许构建为库或Web组件。 docs

我还发现以下文章更深入

https://vuejsdevelopers.com/2018/05/21/vue-js-web-component/