如何在 Vue.js 中使用 jquery 插件

Question

我目前正在将代码重写为 Vue.js 并且我想使用一些 Jquery 插件，但我不太明白该怎么做。 例如我想使用插件滚动条： http://gromo.github.io/jquery.scrollbar/demo/basic.html#anchor

我知道我必须像这样初始化它：

mounted() {
        if (process.client) {
            $(".product-page .product-filter-wr").scrollbar();
        }
    }

但要使其正常工作，我需要在代码中插入脚本连接：

<script type="text/javascript" src="jquery.scrollbar.js"></script>

实际上，这就是问题所在。 我正在使用模板语法，如何将脚本连接到页面？ 如何将插件正确连接到页面？

Answer 1

利用

npm install jquery

之后，您需要导入它

import * as $ from 'jquery'

一旦完成使用

mounted() {
        if (process.client) {
            setTimeout(()=>{
                $(".product-page .product-filter-wr").scrollbar();
             },500);
        }
    }

确保 jquery 存在于您的组件中。

Answer 2

如果您只想在执行的精确时刻包含脚本（例如挂载的钩子），我建议您使用动态加载库，例如loadjs 。

var loadjs = require('loadjs'); // or load it using CDN

// ...

mounted() {
  if (process.client) {
    loadjs(['/jquery.js', '/jquery.scrollbar.js'], 'scrollbar');
    loadjs.ready('scrollbar', () => {
      $(".product-page .product-filter-wr").scrollbar();
    });
  }
}