Question

在Vue项目中包含jQuery库的最佳方法是什么？

我使用的是vue-cli，webpack和路由器。我有单独的组件，我需要包含一些jQuery插件。如果我在索引文件中包含jQuery脚本，那么我就有从组件操作（触发）DOM的问题。所以我想在main.js或组件中包含所有脚本会更好吗？

我需要实现Venobox插件。这是基本的jQuery初始化

$(document).ready(function(){
    $('.venobox').venobox(); 
});

在Vue中我试过

  mounted () {
    $('.venobox').venobox();
  }

现在我遇到了jQuery的问题。＆＃39; $＆＃39;未定义等在Vue项目中包含外部JS文件的最佳做法是什么？有没有简单的方法来初始化jQuery插件？

谢谢！

Answer 1

将由webpack编译的

主要js文件：

window.$ = window.jQuery = require('jquery');

require('venobox/venobox');

window.Vue = require('vue');

// Register your components and your global Vue instance after that

我想您已经从package.json文件中安装了依赖项。

您只需在注册组件之前导入所有依赖项。

Answer 2

如果只有这个使用jQuery的组件，我只能在其中导入它，并且不会为其他任何事情烦恼。您的代码是正确的（在venobox生命周期钩子中初始化mounted），但您还必须在组件中导入jQuery：

import $ from 'jquery';

export default {
  mounted () {
    $('.venobox').venobox();
  }
}

但是，如果你在其他组件中使用jQuery，我建议在这里查看这个答案https://stackoverflow.com/a/39653758/2803743。粘贴选项1，以防它被删除/更改（使用Webpack＆＃39的ProvidePlugin）：

选项＃1：使用ProvidePlugin

将ProvidePlugin添加到build / webpack.dev.conf.js和build / webpack.prod.conf.js中的plugins数组中，以便jQuery全局可用于所有模块：

plugins: [
  // ...

  new webpack.ProvidePlugin({
    $: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    jQuery: 'jquery'
  })
]

在Vue项目中包含或初始化jQuery库的最佳方法是什么？

2 个答案: