文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Vue中使用jQuery插件

问如何在Vue中使用jQuery插件
EN

Stack Overflow用户

提问于 2016-06-20 18:03:35

回答 11查看 146.7K关注 0票数 61

我正在VueJS中构建一个web应用程序，但我遇到了一个问题。我想使用一个jQuery扩展(具体来说是cropit)，但是我不知道如何在不出现错误的情况下实例化/要求/导入它。

我的应用程序使用了de官方CLI工具和de webpack模板。

我在我的jQuery文件中包括了这样的main.js：

import jQuery from 'jQuery'
window.jQuery = jQuery

现在，我正在构建一个图像编辑器组件，我想在其中实例化如下所示：

export default {
  ready () {
    $(document).ready(function ($) {
      $('#image-cropper-wrapper-element').cropit({ /* options */ })
    })
  },
 }

但是我一直在获取errors...Now，我的问题是如何通过NPM/Webpack/Vue正确地实例化jQuery和插件？

提前感谢！

webpack

vue.js

jquery

jquery-plugins

回答 11

Stack Overflow用户

回答已采纳

发布于 2016-09-23 06:12:56

选项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使用公开加载器模块

正如@TremendusApps在他的回答中所建议的那样，添加暴露装载机包：

npm install expose-loader --save-dev

在您的入口点main.js中使用如下：

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

// ...

票数 68

Stack Overflow用户

发布于 2018-03-16 04:02:59

首先使用npm安装jquery，

npm install jquery --save

在需要之前添加app.js (‘/path_to/main.js’)；

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

票数 14

Stack Overflow用户

发布于 2019-04-08 11:42:04

在vue文件中的标记中导入jquery。

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

例如,

<script>
import $ from "jquery";

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

票数 12

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37928998

复制

相似问题

问如何在Vue中使用jQuery插件
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Vue中使用jQuery插件EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Vue中使用jQuery插件
EN