如何在Vue中使用jQuery插件

Question

我正在VueJS中构建一个Web应用程序，但遇到了问题。 我想使用jQuery扩展（具体来说是cropit），但不知道如何正确实例化/要求/导入它，而不会出现错误。

我正在使用官方CLI工具和webpack模板来构建我的应用程序。

在我的main.js文件中，我像这样引入了jQuery：

import jQuery from 'jQuery'
window.jQuery = jQuery

我正在构建一个图像编辑器组件，想要像这样实例化crept：

export default {
  ready () {
    $(document).ready(function ($) {
      $('#image-cropper-wrapper-element').cropit({ /* options */ })
    })
  },
 }

但我一直在收到错误信息...现在我的问题是如何通过NPM/Webpack/Vue正确地实例化jQuery和插件呢？

- Luuk Van Dongen

Answer 1

选项 #1：使用 ProvidePlugin

将ProvidePlugin添加到build/webpack.dev.conf.js和build/webpack.prod.conf.js的插件数组中，使得jQuery对于所有模块都能全局访问：

plugins: [

  // ...

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

选项 #2：使用webpack的Expose Loader模块

如@TremendusApps在他的答案中建议的那样，添加Expose Loader包:

npm install expose-loader --save-dev

在你的入口点main.js中使用，如下所示:

import 'expose?$!expose?jQuery!jquery'

// ...

- prograhammer

---

尝试在下面的jquery插件中放入其他内容，比如'test': require('../src/test')，看看是否在所有组件中都能获取到test。我也这样做了，它是有效的。 - prograhammer

Answer 2

首先使用npm安装jquery，

npm install jquery --save

在 require('/[path_to]/main.js') 之前在 app.js 中添加。

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

- Rafael Andrs Cspedes Basterio

Answer 3

在你的Vue文件中，在

- Wagner

Answer 4

假设您使用vue-cli创建了Vue项目（例如，vue init webpack my-project）。进入项目目录并运行

npm install jquery --save

打开文件build/webpack.base.conf.js并添加plugins：

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
      jQuery: 'jquery'
    })
  ]
  ...
}

在文件顶部添加以下内容：

const webpack = require('webpack')

如果你正在使用 ESLint，请打开 .eslintrc.js 并添加下列全局变量：{

module.exports = {
  globals: {
    "$": true,
    "jQuery": true
  },
  ...

现在您已经准备好了。在您的js中可以随处使用$符号。

注意：您不需要包含expose loader或任何其他内容来使用它。

原始来源：https://maketips.net/tip/223/how-to-include-jquery-into-vuejs

- Lying_cat

Answer 5

你需要使用 globals loader 或者 expose loader 来确保 webpack 在你的源代码输出中包含 jQuery 库，这样当你在组件中使用 $ 时就不会出现错误。

// example with expose loader:
npm i --save-dev expose-loader

// somewhere, import (require) this jquery, but pipe it through the expose loader
require('expose?$!expose?jQuery!jquery')

如果您愿意，您可以将其作为入口点直接在webpack配置中导入（require），我理解，但我手头没有这方面的示例。

或者，您可以像这样使用globals loader： https://www.npmjs.com/package/globals-loader

- Tremendus Apps

Answer 6

有一个非常非常简单的方法。按照以下步骤操作：

MyComponent.vue

<template>
  stuff here
</template>
<script>
  import $ from 'jquery';
  import 'selectize';

  $(function() {
      // use jquery
      $('body').css('background-color', 'orange');

      // use selectize, s jquery plugin
      $('#myselect').selectize( options go here );
  });

</script>

请确保首先安装了JQuery，命令为npm install jquery。同样地，需要安装您的插件。

- ccleve

Answer 7

我这样使用它：

import jQuery from 'jQuery'

ready: function() {
    var self = this;
    jQuery(window).resize(function () {
      self.$refs.thisherechart.drawChart();
    })
  },

- lukpep

---

但是你如何向jQuery添加插件呢？就像我打算做的那样。 - Luuk Van Dongen

在导入jquery之后，使用require来包含插件。 require("<jquery-plugin-name>") 然后在代码中像平常一样调用它。 jQuery(window).<pluginmethod> - Martin Naughton

Answer 8

在使用 TypeScript 版本的 Vue3 中，您可以像这样添加它。

npm i --save jquery
npm i --save @types/jquery

然后在你的 main.ts 文件中。

import jQuery from 'jquery'
window.$ = jQuery

然后您可以在应用程序中的任何位置使用它。

<script setup lang="ts">
  $(document).ready(() => console.log('test'))
</script>

- Andrew

Answer 9

步骤1 我们将终端定位到项目文件夹中，并通过npm或yarn安装JQuery。

npm install jquery --save

步骤 2 在我们想要使用 JQuery 的文件中，例如 app.js (resources/js/app.js)，在脚本部分包含以下代码。

// We import JQuery
const $ = require('jquery');
// We declare it globally
window.$ = $;

// You can use it now
$('body').css('background-color', 'orange');

// Here you can add the code for different plugins

- Vladimir Salguero

Answer 10

运行 npm install jquery --save 然后在你的根组件中，放置以下代码

global.jQuery = require('../node_modules/jquery/dist/jquery.js');
var $ = global.jQuery;

不要忘记导出它，以便您可以将其与其他组件一起使用。

export default {
  name: 'App',
  components: {$}
}

- Wicfasho