1

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

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

4

2 回答 2

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然后将其提供给他，以便他可以包含它。

于 2018-08-27T15:46:32.160 回答
0

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

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

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

于 2018-09-05T02:26:17.277 回答