如何在Vue中使用jQuery插件

Question

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

提前致谢!

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:使用Expose Loader模块进行webpack

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

npm install expose-loader --save-dev

在您的入口点使用,main.js如下所示:

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

// ...

Answer 2

首先使用 npm 安装 jquery，

npm install jquery --save

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

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

Answer 3

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

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

例如，

<script>
import $ from "jquery";

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

Answer 4

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

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