Question

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

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

我的第一个想法是使用Vue CLI prevError，然后进入 dist / 文件夹并拉出以下内容以放入其中：

npm build

尽管感觉不错，是否有更好的方法来实现呢？请记住，他的网站不是Vue应用程序，但我希望像Vue应用程序一样构建此小部件。

Answer 1

据我所知，我不知道我是否能百分百理解。捆绑应用程序无关紧要。这是建筑问题。您可以部分使用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构建小部件，然后将其提供给他，以便他可以包含它。

Answer 2

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

我还发现了下面的文章更深入

docs

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

2 个答案: