是否可以使用单文件组件制作可分发的 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，例如小部件。

首先当你设置 Vue 实例时，只需将元素设置为你的目标元素。

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

如果你想让你的客户自己设置元素，做一些函数来创建vue widget。（考虑多个 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/

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

Is it possible to make a distributable Vue widget with Single File Components?

vue.js

vue-component

vuejs2

vue-cli

vue-cli-3