精华内容
下载资源
问答
  • I'm building a web application inside VueJS but I encounter a ... I want to use a jQuery extension (cropit to be specific) but I don't know how to instantiate/require/import it the right way with...

    I'm building a web application inside VueJS but I encounter a problem. I want to use a jQuery extension (cropit to be specific) but I don't know how to instantiate/require/import it the right way without getting errors.

    I'm using de official CLI tool and de webpack template for my App.

    I included jQuery like this in my main.js file:

    import jQuery from 'jQuery'

    window.jQuery = jQuery

    Now I'm building an image editor component where I want to instantiate crept like this:

    export default {

    ready () {

    $(document).ready(function ($) {

    $('#image-cropper-wrapper-element').cropit({ /* options */ })

    })

    },

    }

    But I keep getting errors...Now my question is how to properly instantiate jQuery and plugins via NPM/Webpack/Vue?

    Thanks in advance!

    解决方案

    Option #1: Use ProvidePlugin

    Add the ProvidePlugin to the plugins array in both build/webpack.dev.conf.js and build/webpack.prod.conf.js so that jQuery becomes globally available to all your modules:

    plugins: [

    // ...

    new webpack.ProvidePlugin({

    $: 'jquery',

    jquery: 'jquery',

    'window.jQuery': 'jquery',

    jQuery: 'jquery'

    })

    ]

    Option #2: Use Expose Loader module for webpack

    As @TremendusApps suggests in his answer, add the Expose Loader package:

    npm install expose-loader --save-dev

    Use in your entry point main.js like this:

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

    // ...

    展开全文
  • 然后想在项目自定义滚动条,舍弃浏览器原生滚动条,成熟的现成插件也只找到了jQuery的,所以不得不引入jQuery,下面介绍下jQuery的引入及其第三方插件的引入:引入jQuery通过npm安装依赖引入1、安装``` ...

    最近学习Vue.js做一个后台管理系统,采用 vue-cli 脚手架搭建,Element作为UI框架。然后想在项目中自定义滚动条,舍弃浏览器原生滚动条,成熟的现成插件也只找到了jQuery的,所以不得不引入jQuery,下面介绍下jQuery的引入及其第三方插件的引入:

    引入jQuery

    通过npm安装依赖引入

    1、安装

    ```
    npm install jquery -S
    ```
    

    2、修改webpack配置文件

    build/webpack.base.conf.js

    ...
    var webpack = require("webpack") // 1. 确保引入 webpack,后面会用到
    
    module.exports = {
      ...
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        modules: [
          resolve('src'),
          resolve('node_modules')
        ],
        alias: {
          'vue$': 'vue/dist/vue.common.js',
          'src': resolve('src'),
          'assets': resolve('src/assets'),
          'components': resolve('src/components'),
          // 2. 定义别名和插件位置
          'jquery': 'jquery' 
        }
      },
      plugins: [
        // 3. 配置全局使用 jquery
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            jquery: "jquery",
            "window.jQuery": "jquery"
        })
      ]
    }

    手动载入

    手动下载jquery 放在static 目录下,如:static/js/jquery.min.js

    和npm不同的只是在第二步定义别名和插件位置:

    alias: {
        'vue$': 'vue/dist/vue.common.js',
        'src': resolve('src'),
        'assets': resolve('src/assets'),
        'components': resolve('src/components'),
        // 2. 定义别名和插件位置
        "jquery": path.resolve(__dirname, '../static/js/jquery.min.js') 
    }

    引入jquery第三方插件

    可以通过npm安装的插件

    这种引入第三方插件的方法和上一节种引入echarts的方法是一样的

    手动引入

    未完待续。。。

    展开全文
  • Vue项目里正确地引用jQuery插件

    千次阅读 2018-04-02 15:55:56
    正文 1.安装jquery依赖 npm install jquery --save 2.修改两处配置文件 module.exports = { // 其他代码... ... extensions: ['', '.js', '.vue'], fallback: [path.join(__dirname, '../node_mod...

    正文

    1.安装jquery依赖

    npm install jquery --save

    2.修改两处配置文件

    module.exports = {
       // 其他代码...
       resolve: {
          extensions: ['', '.js', '.vue'],
          fallback: [path.join(__dirname, '../node_modules')],
          alias: {
              'src': path.resolve(__dirname, '../src'),
              'assets': path.resolve(__dirname, '../src/assets'),
              'components': path.resolve(__dirname, '../src/components'),
    
              // webpack 使用 jQuery,如果是自行下载的
              // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
              // 如果使用NPM安装的jQuery
              'jquery': 'jquery' 
          }
       },
    
       // 增加一个plugins
       plugins: [
          new webpack.ProvidePlugin({
              $: "jquery",
              jQuery: "jquery"
          })
       ],
    
       // 其他代码...
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    3.直接在页面引用

    参考文献

    1. vue-cli怎么引入jQuery 
      http://618cj.com/2016/08/24/vue-cli%E6%80%8E%E4%B9%88%E5%BC%95%E5%85%A5jquery/
    展开全文
  • 我遇到了和楼主遇到了同样的问题,我是引用jquery的第三方插件jquery.mockjax.js,然后在main.js调用require('./assets/jquery.mockjax.js'),出现$此时是undefined。我是这样解决的:通过npm install的方式去安装...

    我遇到了和楼主遇到了同样的问题,我是引用jquery的第三方插件jquery.mockjax.js,然后在main.js中调用require('./assets/jquery.mockjax.js'),出现$此时是undefined。

    我是这样解决的:

    通过npm install的方式去安装的jquery-mockjax,此时发现可以用了,$也有定义了。

    然后我尝试了找了一下两者的不同:

    首先通过npm install安装的jquery-mockjax 的源码和我之前直接引入的js文件是相同的。

    (function(root, factory) {

    'use strict';

    console.log(arguments);

    console.log('root', root);

    // AMDJS module definition

    if ( typeof define === 'function' && define.amd && define.amd.jQuery ) {

    console.log('this is in amdjs module definition');

    define(['jquery'], function($) {

    return factory($, root);

    });

    // CommonJS module definition

    } else if ( typeof exports === 'object' && module.exports) {

    console.log('this is CommonJs module definition');

    // NOTE: To use Mockjax as a Node module you MUST provide the factory with

    // a valid version of jQuery and a window object (the global scope):

    // var mockjax = require('jquery.mockjax')(jQuery, window);

    module.exports = factory;

    // Global jQuery in web browsers

    } else {

    console.log('this is global jquery in web browsers');

    return factory(root.jQuery || root.$, root);

    }

    }(this, function($, window) {

    'use strict';

    这是源码部分,采用UMD的方式。

    方式一:

    通过require('./assets/jquery.mockjax.js')的方式去引入该文件,webpack编译后的代码是直接进入第三个判断分支进行判断,直接调用了该工厂函数,webpack在处理的时候this传入的是modules.exports对象,此时module.exports对象是找不到jquery的,因此报错。尝试将源码中的this改为global后,是可以解决的。网上也提供了不修改源码,通过imports-loader的方式将this赋值为window。require('import-loader?this=>window!./assets/jquery.mockjax.js')

    方式二:

    通过require('jquery-mockjax')的方式引入,webpack编译后的文件直接进入第二个分支,通过阅读编译后的文件发现webpack直接将第二个分支的判断条件置为了true,也就是默认Commonjs的引入方式,这也就解释了这种方式为什么不会报错的原因。

    通过我的这个实例,希望能够给楼主一些提示。如果楼主的jquery第三方插件也是UMD格式的,很有可能和我遇到的是一个错误。

    但是一直有个疑问,webpack对npm包的编译和直接引入的js文件编译为什么会不同,官方文档中哪里解释了这一部分,一直没找到。也希望楼上的大神给予解答。

    展开全文
  • 前言话不多说,有时候你还是真的需要在Vue中使用某些好用的jQuery插件,这时候为了使用这个插件,犯不着全局引入jQuery,所以还要局部引入,怎么做呢?以ion-rangeslider举例我在我写的《谁说在Vue.js里不能使用...
  • 查了一些资料,步骤是这样的:(1)首先在package.json加入jQuery依赖,然后npm install jQuery --save安装依赖;(2)在build文件夹下找到webpack.base.conf.js文件,添加var webpack=require('webpack'),然后在...
  • vue 项目调用jquery插件jquery.wordexport.js将HTML导出生成word文档 1.利用vue-cli2.0创建一个vue项目: 第一步:vue install -g vue-cli (全局安装,安装一次就行,下次创建项目可以直接执行第二步)安装完毕,...
  • 前言: 最近在做一个【生成报告类的系统】,其中最核心的功能就是“如何一键生成报告” 为了解决这一难题,博主采取了很多方案,也参考了网上的文章,无奈的是,很多文章说的不够仔细、清楚,看...使用jQuery插件——Wo
  • vue-cli搭建的vue项目中使用jquery插件,需要引入jquery,在无任何配置的情况下,直接在组件中import引入,在mounted时候打印$ 会显示undefined报错问题,感觉直接引入不应该报这种错误,之前这么使用都是没...
  • 虽然在 Vue 中不推荐使用 jQuery ,但有时候要...如果实在是因为无法避免的原因,需要在 Vue 项目中使用jQuery 则建议使用局部引入的方式,就是哪个文件需要用到 jQuery ,就在哪个文件中引入 在网上搜 “Vue...
  • npm install jquery --save 二、vue.config.js里配置 "use strict"; // 核心代码 const webpack = require("webpack"); module.exports = { //其他配置 assetsDir: "static", // 核心代码 ...
  • vue能用jQuery吗?

    2021-06-18 05:27:28
    Vue项目里使用jQuery是完全...Vue中使用jqueryvue项目中,需要实现某些特定的功能时,使用mvvm模式不易实现。因此引入jquery包来完成需求1.NPM 安装 jQuery,项目根目录下运行以下代码npm install jquery --save2....
  • 闲来无事先写一篇博客,整合一下最近网上更新的资源,在用webpack构建VUE项目时会遇到仍旧想用jquery以及依赖jQuery插件,但是引入jq会很麻烦,这里介绍一种比较简单使用的方法,使用expose-loader先简单介绍一下...
  • 使用Vue真的太棒了,但是也有可能使你头疼,当你试图使它与jquery插件混用的时候。问题的原因是jquery与Vue是完全不同的东西,Vue是通过组件与数据绑定来进行渲染的,jquery则主要是用来做简单的单击处理和强大的...
  • 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 ? 1 2 3 4 5 6 7 8 9 1
  • vue中使用viewer.js 插件

    2021-03-29 14:45:37
    一、预览图 二、地址及参数 viewer.js GitHub地址:https://github.com/fengyuanchen/viewerjs ... 名称 ...显示右上角关闭按钮(jQuery 版本无效) navbar 布尔值/整型 true 显示缩略图导航 title 布尔值/整型
  • 2、编辑webpack.base.conf.js文件,引入webpack,并配置jquery插件;3、在入口文件输入【import $ from 'jquery'】。本教程操作环境:windows10系统、vue2.9版,该方法适用于所有品牌电脑。1、下载jquerynpm ...
  • vue项目全局引用jquery : 1、“ npm install jquery --save ” 命令安装jquery 2、在项目根目录下的 build 目录下找到webpack.base.conf.js 文件,在开头使用以下代码引入webpack,如下 var webpack = ...
  • 这个工具的名字叫 replace-jquery ,据说是能帮你从项目自动查找所有用到的jquery方法,并生成一套原生js的方法去替代 使用方式 1、全局下载 cnpminstall-greplace-jquery 2、在项目目录使用,语法为:...
  • 记录在vue中引入Jquery

    2021-01-13 10:14:40
    第一步:全局安装jquery依赖 第二步:修改配置文件 完成安装jQuery依赖之后,我们要修改 webpack.base.conf 文件配置文件。...其次是在下图的位置,添加代码配置jQuery插件: 第三步:在组件引入jquery,进行使用
  • vue中引用Jq插件报错

    2020-12-29 02:17:16
    引用一个jq天气插件后就报这个错误了,有没有大神知道解决办法!插件代码:eval(function(p, a, c, k, e, d) {e = function(c) {return(c < a ? "" : e(parseInt(c / a))) + ((c = c % a) > 35 ? String....
  • vuecli3.0全局引入jquery

    千次阅读 2019-11-21 19:13:35
    之前使用jquery都是每个组件引入 import $ from 'jquery' 这种方式需要在每个要使用jquery的组件里面引入一下,...2.vue.config.jswebpack配置configureWebpack添加jquery插件 vuecli3修改webpack配置 ...
  • 使用需求 时隔两年多,再次使用到了ztree,这次是在vue中引入使用,并遇到了一些小问题...有关ztree的使用,之前整理过两篇在jquery中使用的方法,大家参考下:zTree -- jQuery插件 使用方法与例子zTree -- jQue...
  • vue-cli 3.0 脚手架搭建的 vue项目,使用 typescript编写。期间遇见了不少坑。 由于项目需要用到第三方密码键盘插件和加密插件,须在index.html 页面顶部 引入jquery JS. &amp;lt;script src=&quot;./...
  • 使用Vue开发Chrome插件

    2021-09-18 12:41:45
    原文链接:使用Vue开发Chrome插件 - 愧怍的小站 (kuizuo.cn) 前言 我当时学习开发Chrome插件的时候,还不会Vue,更别说Webpack了,所以使用的都是原生的html开发,效率就不提了,而这次就准备使用vue-cli来进行编写...
  • VUE 引入JQUERY

    2021-04-07 17:50:27
    npm 安装jquery 改webpack
  • 项目中有许多报表之类的统计 涉及表格跨行跨列较多固无法使用网上说的xlsx导出(因为需要一行一行处理跨行跨列),想到之前html时用的jquery插件table2excel.js 直接移至Vue中使用完美解决。 1. 首先需要在Vue中...
  • 本文给出在vue.js里如何使用cordova的插件完成调取相机及图库,并完成图片上传的操作。具体的操作步骤如下第一步:在cordova项目下安装cordova-plugin-camera插件cordova plugin add cordova-plugin-camera第二步:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,005
精华内容 8,002
关键字:

vue中使用jquery插件

vue 订阅