vue+webpack 引入jquery
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
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的更多相关文章
- Vue中引入jquery方法
vue-cli webpack 引入jquery 今天费了一下午的劲,终于在vue-cli 生成的工程中引入了jquery,记录一下.(模板用的webpack) 首先在package.json里的 ...
- Vue中引入jquery方法 vue-cli webpack 引入jquery
在vue-cli 生成的工程中引入了jquery(模板用的webpack) 首先在package.json里的dependencies加入"jquery" : "^2.2 ...
- vue中引入jQuery和bootstrap
一.引入jQuery: 首先在当前项目的根目录下(就是与package.json同目录),运行命令npm install jquery --save-dev 这样就将jquery安装到了这个项目中 ...
- 非常简单的vue里面引入jquery
如何在vue里面引入jq了,只需四部就完成 第一步 cnpm install jquery 第二步 打开build文件夹 , 打开webpack.base.conf.js文件找到下面module.ex ...
- VUE项目引入jquery
既然写项目,那么少不了用jq,那我们就引入进来吧 1.因为已经安装了vue脚手架,所以需要在webpack中全局引入jquery 打开package.json文件,在里面加入这行代码,jquery后面 ...
- 在vue下引入jquery bootstrap
在vue 项目中引入jquery bootstrap 引入jquery npm install jquery --save-dev 在项目根目录下的build/webpack.base.conf.js ...
- vue-cli webpack 引入jquery
首先在package.json里的dependencies加入"jquery" : "^2.2.3",然后install 在webpack.base.conf. ...
- 【vue】vue中引入jquery
简洁版: 第一步:首先在package.json中输入"jquery":"^3.2.1",其中“3.2.1”为jquery版本号,按需修改 注:package. ...
- vue中引入jquery
npm install jquery -S 在webpack.base.conf.js里加入 plugins: [ new webpack.optimize.CommonsChunkPlugin('c ...
随机推荐
- 某考试 T1 function
(数据范围 n<=10^9 ,T<=10 ) 首先,我来证明一下 Σμ(d) * σ(i/d)^2 = σ(i^2) 相信做过约数个数和的童鞋都可以完成从右式推到左式,那么我现在就说一下怎 ...
- Java并发编程实战 读书笔记(二)
关于发布和逸出 并发编程实践中,this引用逃逸("this"escape)是指对象还没有构造完成,它的this引用就被发布出去了.这是危及到线程安全的,因为其他线程有可能通过这个 ...
- PHP用CURL发送Content-type为application/json的HTTP/HTTPS请求
<?php $headers = array( "Content-type: application/json;charset='utf-8'", "Accept: ...
- 使用SourceTree 来管理 Gitcafe 的Pages 发布Blog!
有个好爹的 SourceTree 是来自 JIRA 的娘家 Bitbucket 的新东家 ATLASSIAN.com 一家成功的,对敏捷软件工程拥有全栈式支持的商业公司, 所推出的 MAC 专用, S ...
- tcp三次握手和syn 洪水攻击
1. 连接后,所有的 ack 为1才有效(连接后,ack 也一般都是1) 2. 建立连接3次握手, 如何确认对方收到了你发的包, seq 是自己发出去的,自己知道seq的值.所以怎么确认对方收到了自己 ...
- iOS类的合理设计,面向对象思想
每天更新的东西可能有反复的内容.当时每一部分的知识点是不同的,须要大家认真阅读 这里介绍了iOS类的合理设计.面向对象思想 main.m #import <Foundation/Foundati ...
- vs2010配置VL_FEAT库
VL_FEAT库是计算机视觉中的一个开源库,支持C/C++,Matlab,可以在http://www.vlfeat.org/下载. 本文主要讲一下VS2010中如何配置vl_feat库(算是对原文的一 ...
- Centos6-编译安装Redis
[root@tbwy02 ~]# cd /tools/[root@tbwy02 tools]# yum install -y wget gcc make tcl[root@tbwy02 tools]# ...
- 使用Axis2开发WebService
一.准备 1.下载Axis2.eclipse插件 axis2-1.6.2-war.zip: http://mirror.bjtu.edu.cn/apache//axis/axis2/java/core ...
- 百度新算法与网站SEO提升