如何在Vue中使用jQuery插件

问题描述 投票:33回答:8

我正在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和插件?

提前致谢!

jquery jquery-plugins webpack vue.js
8个回答
54
投票

选项#1:使用ProvidePlugin

ProvidePlugin添加到build/webpack.dev.conf.jsbuild/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'

// ...

6
投票

您需要使用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


5
投票

假设您使用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


3
投票

首先使用npm安装jquery,

npm install jquery --save

我用:

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

2
投票

我这样使用它:

import jQuery from 'jQuery'

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

0
投票

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

0
投票

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

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。对你的插件做同样的事情。


0
投票

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

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

例如,

<script>
import $ from "jquery";

export default {
    name: 'welcome',
    mounted: function() {
        window.setTimeout(function() {
            $('.logo').css('opacity', 0);   
        }, 1000);
    } 
}
</script>
© www.soinside.com 2019 - 2024. All rights reserved.