Question

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

我正在为我的应用程序使用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和插件？

提前致谢！

Answer 1

选项＃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：对Webpack使用Expose Loader模块

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

npm install expose-loader --save-dev

在您的切入点main.js中使用，如下所示：

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

// ...

Answer 2

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

Answer 3

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

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

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

Answer 4

我这样用：

import jQuery from 'jQuery'

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

Answer 5

首先使用npm安装jquery，

import re
version = '9.130.46.32.6.2' (six digit) -->SHOULD MATCH
version = '9.130.46.32.6.2.1'(seven digit) --> SHOULD NOT MATCH

#if the version is six digit append a ".0" as 4th digit

regex = re.compile(r'\d+\.\d+\.\d+\.\d+\.\d+\.\d+')
m = regex.match(version)
if m:
    print "Its a six digit version..."
    digit1 = version.split('.')[-6]
    print digit1
    digit2 = version.split('.')[-5]
    print digit2
    digit3 = version.split('.')[-4]
    print digit3
    digit4 = version.split('.')[-3]
    print digit4
    digit5 = version.split('.')[-2]
    print digit5
    digit6 = version.split('.')[-1]
    print digit6
    new_version = digit1 + "."+ digit2 + "." + digit3 + "."+  "0." + digit4 + "." + digit5 + "." + digit6
print new_version

我用：

npm install jquery --save

Answer 6

第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

Answer 7

有一种非常简单的方法。这样做：

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。对您的插件执行相同的操作。

Answer 8

在vue文件的

如何在Vue中使用jQuery插件

9 个答案: