如何在 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();
    });
  }
}

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

How to use jquery plugins in Vue.js

jquery

scrollbar

vue.js