1 首先 cnpm install jquery;这时jquery已经安装成功,可以使用jquery,但是jquery不是全局的,需要在使用的组件中引入jquery,jquery的路径是jquery/dist/jquery.min.js,

inport $ from "jquery/dist/jquery.min.js" 就可以使用$了;

我们也可以在webpack.base.config.js中配置;路径的别名方便引入:2


之后我们就可以在使用jquery的组件中这样引入

3 import $ from 'jquery';

这是jquery不是全局的,如果要使用在每一个模块中需要import 。比较麻烦,下面是设置jquery为全局的方法:

一。引入jQuery

在当前项目的目录下(就是package.json),运行命令 cnpm install jquery --save-dev  这样就将jquery安装到了这个项目中。在上面步骤的前提下:

修改webpack.base.conf.js(在build文件下)两个地方:

4:加入

var webpack=require('webpack');

5 在module.exports的里面加入

plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]

6 最后在main.js中加入import $ form 'jquery',完成jquery的引入

ok,这是jquery就是全局的了,在任意模块中都可以使用了

tip:在webpack的output.libraryTarget,需要设置为var,默认值就是var(当 library 加载完成,入口起点的返回值将分配给一个变量),如果设置为commonjs等可能会报错,原因见:output.libraryTarget

如果想要引入不会以commonjs规范书写的js就可以这样引入,在组件中import之后,因为是commonjs规范,所以会按顺序加载,引入成功

vue+webpack 引入jquery的更多相关文章

  1. Vue中引入jquery方法

    vue-cli webpack 引入jquery   今天费了一下午的劲,终于在vue-cli 生成的工程中引入了jquery,记录一下.(模板用的webpack) 首先在package.json里的 ...

  2. Vue中引入jquery方法 vue-cli webpack 引入jquery

    在vue-cli 生成的工程中引入了jquery(模板用的webpack) 首先在package.json里的dependencies加入"jquery" : "^2.2 ...

  3. vue中引入jQuery和bootstrap

    一.引入jQuery: 首先在当前项目的根目录下(就是与package.json同目录),运行命令npm install jquery --save-dev   这样就将jquery安装到了这个项目中 ...

  4. 非常简单的vue里面引入jquery

    如何在vue里面引入jq了,只需四部就完成 第一步 cnpm install jquery 第二步 打开build文件夹 , 打开webpack.base.conf.js文件找到下面module.ex ...

  5. VUE项目引入jquery

    既然写项目,那么少不了用jq,那我们就引入进来吧 1.因为已经安装了vue脚手架,所以需要在webpack中全局引入jquery 打开package.json文件,在里面加入这行代码,jquery后面 ...

  6. 在vue下引入jquery bootstrap

    在vue 项目中引入jquery bootstrap 引入jquery npm install jquery --save-dev 在项目根目录下的build/webpack.base.conf.js ...

  7. vue-cli webpack 引入jquery

    首先在package.json里的dependencies加入"jquery" : "^2.2.3",然后install 在webpack.base.conf. ...

  8. 【vue】vue中引入jquery

    简洁版: 第一步:首先在package.json中输入"jquery":"^3.2.1",其中“3.2.1”为jquery版本号,按需修改 注:package. ...

  9. vue中引入jquery

    npm install jquery -S 在webpack.base.conf.js里加入 plugins: [ new webpack.optimize.CommonsChunkPlugin('c ...

随机推荐

  1. Java8期间及持续时间

    原文:http://www.yiibai.com/java8/java8_periodduration.html 使用Java8,两个专门类引入来处理时间差. Period - 处理有关基于时间的日期 ...

  2. 【gradle】mac上安装gradle

    根据gradle官网指导,一步一步安装即可 https://gradle.org/install/ 或者,如果你没有办法墙出去,或者本地使用命令下载gradle比较慢的话,可以采用下面的方式 ==== ...

  3. SolidEdge 装配体中如何快速的搞定一个面上所有螺丝 如何在装配体上进行阵列

    1 点击"规则排列" 选择要排列的螺丝   2 选择被规则排列的架子   3 选择所有的圆孔(鼠标滑到任意圆孔位置,左键单击即可选中所有圆孔)   4 选择参考的基准孔(已经上了螺 ...

  4. BeagleBone Black Industrial 进阶设置(性能优化以及延长板载eMMC存储寿命)

    前言 原创文章,转载引用务必注明链接.水平有限,欢迎指正. 本文使用markdown写成,为获得更好的阅读体验,推荐访问我的博客原文: http://www.omoikane.cn/2016/09/1 ...

  5. 【剑指offer】异或去重

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/27568975 这篇文章没有代码.介绍的是纯理论的思路. 异或是一种基于二进制的位运算,用符 ...

  6. uva 11488 - Hyper Prefix Sets(字典树)

    H Hyper Prefix Sets Prefix goodness of a set string is length of longest common prefix*number of str ...

  7. hdu3076ssworld VS DDD 概率dp

    //ssworld VS DDD 两个人有血量值 hp1 , hp2  //两人掷骰子得到每一点的概率已知 //ssword赢的概率 //dp[i][j]  表示有第一个人血量为i.第二个人的血量为j ...

  8. VirtualBox 虚拟Ubuntu系统与主机互ping

    互ping的前提是主机和虚拟机的ip地址在同一波段[eg:主机为:192.168.1.10虚拟Linux:192.168.1.11] 1.设置主机ip:                         ...

  9. BoW(SIFT/SURF/...)+SVM/KNN的OpenCV 实现

    本文转载了文章(沈阳的博客),目的在于记录自己重复过程中遇到的问题,和更多的人分享讨论. 程序包:猛戳我 物体分类 物体分类是计算机视觉中一个很有意思的问题,有一些已经归类好的图片作为输入,对一些未知 ...

  10. iOS之UI--涂鸦画板实例

     iOS之UI--涂鸦画板实例  首先是搭建框架 其他的略过,直接展示效果: 然后接下来上传搭建好两个控制器框架的源码百度云下载链接: http://pan.baidu.com/s/1skjpDox  ...