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

【问题标题】：Is it possible to make a distributable Vue widget with Single File Components?是否可以使用单文件组件制作可分发的 Vue 小部件？
【发布时间】：2019-02-02 03:58:13
【问题描述】：

这可能是一个有点奇怪的问题，但我会尽力解释。

我正在为客户的 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 应用程序一样构建。

【问题讨论】：

你可以把你的视频播放器开发成Vue插件，然后像JQuery一样，导入vue.js,vue.plugin-name.js
CLI 3.0 允许您构建为库或 Web 组件，检查 cli.vuejs.org/guide/build-targets.html#library 看看它们是否适合您的需要。

标签： vue.js vuejs2 vue-component vue-cli vue-cli-3

【解决方案1】：

我不知道我是否理解 100%，据我所知，这是可能的。你如何捆绑你的应用程序并不重要。这是一个架构问题。你可以部分使用 vue.js，比如小部件。

首先，当您设置 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 构建你的小部件，然后将它交给他，以便他可以包含它。

【讨论】：

这种方法可以用来在一个页面上创建多个不同的 Vue 小部件吗？

【解决方案2】：

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

我还发现下面这篇文章更深入

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

【讨论】：