如何在Vue中使用jQuery插件

Posted 2021-04-24

我正在VueJS中构建一个Web应用程序但我遇到了一个问题。我想使用jQuery扩展（cropit是特定的）但我不知道如何以正确的方式实例化/ require / import它而不会出错。

我正在为我的应用程序使用de官方CLI工具和de 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和插件？

提前致谢！

答案

选项＃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'
  })
]

选项＃2：使用Expose Loader模块进行webpack

正如@TremendusApps在他的回答中建议的那样，添加Expose Loader包：

npm install expose-loader --save-dev

在您的入口点main.js中使用如下：

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

// ...

另一答案

您需要使用globals加载程序或expose加载程序来确保webpack在源代码输出中包含jQuery lib，以便在组件中使用$时不会抛出错误。

// 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配置中导入（要求）它作为入口点，所以我理解，但我没有这方面的例子。

或者，你可以像这样使用全局加载器：https://www.npmjs.com/package/globals-loader

另一答案

假设您使用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中使用$ anywhere。

注意您不需要包含公开加载程序或任何其他东西来使用它。

最初来自https://maketips.net/tip/223/how-to-include-jquery-into-vuejs

另一答案

首先使用npm安装jquery，

npm install jquery --save

我用：

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

另一答案

我这样使用它：

import jQuery from 'jQuery'

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

另一答案

步骤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

另一答案

有一种更容易的方式。做这个：

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>

确保首先使用npm install jquery安装JQuery。对你的插件做同样的事情。

另一答案

在vue文件的<script>标记内导入jquery。

我认为这是最简单的方法。

例如，

<script>
import $ from "jquery";

export default {
    name: 'welcome',
    mounted: function() {
        window.setTimeout(function() {
            $('.logo').css('opacity', 0);   
        }, 1000);
    } 
}
</script>