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. Java面向对象练习题

    1.猜数字游戏: 一个类A有两个成员变量v.num,v有一个初值100. 定义一个方法guess,对A类的成员变量v,用num进行猜. 如果大了则提示大了,小了则提示小了.等于则提示猜测成功. 在ma ...

  2. centos的python2.6.x升级到python2.7.x方法;python2.6.x的版本就不要用了

    python2.6.x的版本,现在使用的很多插件都不支持了.所以如果你的centos还是使用的2.6.x版本,不要犹豫,赶紧升级到2.7.x版本 1.所谓升级,就是再安装一个python2.7.x版本 ...

  3. 关于android分享(sharedsdk的简单使用)

    老早就使用了.可是如今才写,惰性太大,如今改 如今做产品的话相信大家基本都做分享吧.一个是项目的需求须要,另一个是能够非常好的宣传自己的产品.其它的优点依据情况而论 事实上每一个平台都有它自己的文档, ...

  4. 把握linux内核设计思想(十二):内存管理之slab分配器

    [版权声明:尊重原创,转载请保留出处:blog.csdn.net/shallnet,文章仅供学习交流.请勿用于商业用途] 上一节最后说到对于小内存区的请求,假设採用伙伴系统来进行分配,则会在页内产生非 ...

  5. AppCan移动应用开发平台新增9个超有用插件(内含演示样例代码)

    使用AppCan平台进行移动开发.你所须要具备的是Html5+CSS +JS前端语言基础.此外.Hybrid混合模式应用还需结合原生语言对功能模块进行封装,对于没有原生基础的开发人员,怎样实现App里 ...

  6. palindrome-partitioning I&II——回文切割、深度遍历

    I: Given a string s, partition s such that every substring of the partition is a palindrome. Return ...

  7. 基本SQL 语句操作数据增删查改

    1.创建数据库: create database <数据库名>. 如:create database student; 2.连接到一个已经存在的数据库: use <数据库名>: ...

  8. BZOJ 3732 Network 最小瓶颈路

    题目大意:给出一个无向边,非常多询问,问x,y两地之间的最长路最短是多少. 思路:乍一看好像是二分啊. 的确这个题二分能够做.可是时间会慢非常多,有的题直接就T掉(NOIP2013货车运输). 事实上 ...

  9. HDU 1248 寒冰王座 (水题的N种做法!)(含完全背包)

    寒冰王座 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  10. struts(转)

    配置文件的优先级 在struts2中一些配置(比如常量)可以同时在struts-default.xml(只读性),strtus-plguin.xml(只读性),struts.xml,struts.pr ...