如何在 Vue 中使用 jQuery 插件答案

【问题标题】：How to use a jQuery plugin inside Vue如何在 Vue 中使用 jQuery 插件
【发布时间】：2023-03-10 10:40:02
【问题描述】：

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

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

【解决方案1】：

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

【讨论】：

【解决方案2】：

我是这样使用的：

import jQuery from 'jQuery'

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

【讨论】：

那么你如何将插件添加到 jQuery 中呢？就像我打算做的那样。
在上面的 jquery 导入之后包含一个插件使用 require 。 require("<jquery-plugin-name>") 然后像往常一样在代码中调用它 jQuery(window).<pluginmethod>

【解决方案3】：

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

// ...

【讨论】：

尝试在 jquery 下方的插件中添加其他内容...例如 'test': require('../src/test') 并查看是否在所有组件中都进行了测试。我也这样做了，而且效果很好。

【解决方案4】：

首先使用 npm 安装 jquery，

npm install jquery --save

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

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

【讨论】：

【解决方案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

【讨论】：

【解决方案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

【讨论】：

【解决方案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。对你的插件做同样的事情。

【讨论】：

【解决方案8】：

在你的 vue 文件的

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

例如，

<script>
import $ from "jquery";

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

【讨论】：

【解决方案9】：

运行npm install jquery --save

然后在你的根组件上，放置这个

global.jQuery = require('../node_modules/jquery/dist/jquery.js');
var $ = global.jQuery;

不要忘记将其导出以使您可以将其与其他组件一起使用

export default {
  name: 'App',
  components: {$}
}

【讨论】：

【解决方案10】：

我的项目也遇到了同样的问题。我通过将单独的 js 文件导入到我的 vue 组件来修复它。我创建了一个const，它的方法可以在main.js 上使用jQuery。

main.js

export const jQueryMixin = {
    method: {
        init() {}
    }
}

在我的 vue 组件上，我导入并使用了我在 main.js 上创建的对象。

首页.vue

import { jQueryMixin } from '../../main';

export default {
    created() {
        jQueryMixin.method.init();
    }
}

【讨论】：