如何在 Vue 中使用 jQuery 插件

Question

我正在 VueJS 中构建 Web 应用程序，但我遇到了问题。我想使用 jQuery 扩展（具体来说是 cropit），但我不知道如何以正确的方式 instantiate/require/import 它而不会出错。

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

提前致谢！

Answer 1

您需要使用 globals 加载器或 expose 加载器来确保 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 配置中导入（要求）它作为入口点，所以我明白，但我手头没有这样的例子

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

Answer 2

我是这样使用的：

import jQuery from 'jQuery'

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

Answer 3

选项 #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'

// ...

Answer 4

首先使用 npm 安装 jquery，

npm install jquery --save

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

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

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 中的任何地方使用 $。

注意你不需要包含暴露加载器或任何其他东西来使用它。

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

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>

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

Answer 8

在您的 vue 文件的

如何在 Vue 中使用 jQuery 插件

How to use a jQuery plugin inside Vue

jquery

jquery-plugins

webpack

vue.js