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. JStorm学习

    一.简介 JStorm是一个分布式实时计算引擎.JStorm是一个类似于Hadoop MapReduce的系统,用户按照指定的接口实现一个任务,然后将这个任务交给JStorm系统,JStorm将这个任 ...

  2. js dom 的常用属性和方法

    1.对象集合:      (1).all[];      (2).images[];      (3).anchors[];      (4).forms[];      (5).links[];   ...

  3. Maven的仓库

    以下内容引用自https://ayayui.gitbooks.io/tutorialspoint-maven/content/book/maven_repositories.html: 什么是Mave ...

  4. php使用strpos,strstr,strchr注意啦,若是数字查找则会当成ASCII码处理

    strpos,strstr,strchr都是查找某字符出现的位置,若未找到,则返回false(判断是===) 如: var_dump(strpos("oa",'97')); var ...

  5. 利用systemtap定位ifconfig dropped数据包的原因

    http://blog.chinaunix.net/uid-20662820-id-3842431.html   欢迎转载,转载请保留文章的完整性!Author: Tony <tingw.liu ...

  6. 一种排序(nyoj8)(简单排序)

    一种排序 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描写叙述 如今有非常多长方形.每个长方形都有一个编号,这个编号能够反复.还知道这个长方形的宽和长,编号.长.宽都是整数 ...

  7. HDU 3820 Golden Eggs( 最小割 奇特建图)经典

    Golden Eggs Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  8. 【Unity 3D 游戏开发】Unity3D 入门 - 工作区域介绍 与 入门演示样例

    一. 工作区域具体解释 1. Scence视图 (场景设计面板) scence视图简单介绍 : 展示创建的游戏对象, 能够对全部的游戏对象进行 移动, 操作 和 放置; -- 演示样例 : 创建一个球 ...

  9. 常见mysql分布式数据中间件

    一般分为三种: 1. proxy sharding,目前由cobar,mycat,drds,atlas修改,这几个产品的起源一般是mysqlproxy 或 ameoba,特点是mysql协议基本兼容, ...

  10. http协议的队首阻塞

    1 队首阻塞 就是需要排队,队首的事情没有处理完的时候,后面的人都要等着. 2 http1.0的队首阻塞 对于同一个tcp连接,所有的http1.0请求放入队列中,只有前一个请求的响应收到了,然后才能 ...