如何在 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

如果您只想在执行的精确时刻包含脚本（例如mounted hook），我建议您使用动态加载库，例如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();
    });
  }
}

Answer 2

使用

npm install jquery

之后，你需要导入它

import * as $ from 'jquery'

使用完毕

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

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