2

我正在将 VueJS 与 Webpack 一起使用，并且我正在尝试使用这个 jQuery 标签输入库。鉴于它的需要，我将 jQuery 作为一个全局对象包括在内：

// in webpack.config.js
new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery",
  "window.jQuery": "jquery",
  "jQuery.tagsinput": "bootstrap-tagsinput"
})

// in main JS
import jQuery from 'jquery';

这一切都有效，但问题是能够获得这个其他库。我可以require将它放入主 JS 文件 ( require('../node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.js'); ) 中，然后将它放入我的供应商文件中，但它没有执行并且没有任何反应。

我究竟做错了什么？我是否需要以import-loader某种方式使用，或者一些匀场的东西——完全是别的东西？

4

1 回答 1

3

好的，我得到它的工作。这是我所做的：

  1. 在webpack.config.js：

    plugins : [
 // ...
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery",
    "jQuery.tagsinput": "bootstrap-tagsinput"
  })
]

  2. 在我的主要 Javascript 文件中：

    // other imports, etc.
require('imports?$=jquery!../node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.js');

请注意，这需要使用imports-loader.

  1. 在我的组件中：

    export default {
  // ...
  ready: function() {

      this.$watch('MY_MODEL', function(elt) {
          $('input[data-role=tagsinput]').tagsinput();
      });

  }
}

注意这里需要手动申请.tagsInput()。这.$watch是为了确保元素实际呈现在页面上。如果您只是将.tagsinput()调用直接放入ready，它不会触发，因为该元素不一定已添加到 DOM。window.requestAnimationFrame如果需要，您还可以使用来构建解决方案。

于 2016-07-02T20:37:16.570 回答