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

What is the best way to include the jQuery library in Vue project?

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

I'm using a vue-cli, webpack and router. I have separate components and I need to include few jQuery plugins. If I include jQuery script in index file, then I have problem to manipulate (trigger) DOM from components. So I guess it's better to include all scripts in my main.js or components?

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

I need to implement Venobox plugin. This is basic jQuery initialization

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

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

In Vue i tried with

在Vue我尝试过

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

Now I have problem with jQuery. '$' is not defined etc. What is the best practice to include external JS files in Vue project? Is there are ease way to initialize jQuery plugins?

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

Thanks!

谢谢！

2 个解决方案

#1

If it's only this one component that uses jQuery, I'd import it exclusively inside of it and wouldn't bother with anything else. Your code was correct (initialising venobox inside the mounted lifecycle hook), but you also have to import jQuery inside your component:

如果它只是这个使用jQuery的组件，我会在它内部专门导入它，并且不会打扰其他任何东西。您的代码是正确的（在已安装的生命周期钩子中初始化venobox），但您还必须在组件中导入jQuery：

import $ from 'jquery';

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

However, if you use jQuery inside other components as well, I suggest looking at this answer here https://*.com/a/39653758/2803743. Pasting option 1 here in case it gets removed/changed (the use of Webpack's ProvidePlugin):

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

Option #1: Use ProvidePlugin

选项＃1：使用ProvidePlugin

Add the ProvidePlugin to the plugins array in both build/webpack.dev.conf.js and build/webpack.prod.conf.js so that jQuery becomes globally available to all your modules:

将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'
  })
]

#2

Main js file that will be compiled by webpack:

将由webpack编译的主要js文件：

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

require('venobox/venobox');

window.Vue = require('vue');

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

I suppose that you already have the dependencies installed from your package.json file.

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

You simply have to import all your dependencies before registering your components.

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

#1

import $ from 'jquery';

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