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 ...
随机推荐
- seo优化入门教程:认识搜索引擎
对于从来没有学过seo或者零基础的人来说,搜索引擎可能都不太了解.所以我们先来认识搜索引擎有哪些,同时为什么我们要学习搜索引擎优化. 从目前全球的一个搜索引擎来说的话,他的分支是非常多的,甚至可以讲, ...
- Android-一张图理解MVP的用法
M和V通过P交互,M做了两件事,开启子线程做耗时操作,然后使用原生的Hander方式切回主线程回调结果给P. M做的两件事也可以使用比较流行的rxjava实现: 备注:图片不清晰可以看这里
- 【Java TCP/IP Socket】基于NIO的TCP通信(含代码)
NIO主要原理及使用 NIO采取通道(Channel)和缓冲区(Buffer)来传输和保存数据,它是非阻塞式的I/O,即在等待连接.读写数据(这些都是在一线程以客户端的程序中会阻塞线程的操作)的时候, ...
- apache多网站配置
前言 虽说apache安装好后给了我们一个默认的一个网站.并且我们还能够将这个默认的网站改动成我们自己的网站.可是这似乎还不能全然满足我们的须要,由于当我们要在本机上开发(phpWeb)或者測试另外 ...
- js 监控浏览器关闭(完美兼容chrome & ie & fire fox)
var UnloadConfirm = {}; UnloadConfirm.MSG_UNLOAD = "数据尚未保存,离开后可能会导致数据丢失\n\n您确定要离开吗?"; Unlo ...
- 用C++、Qt实现的小游戏2048
窗口布局与游戏截图: 实现思路: 1.使用二维数组模拟整个游戏网格,并将二维数组中每个数的大小用作游戏中每个网格中的数据. 2.将对游戏的数据及数据的操作(即玩家的操作对游戏数据的影响)作为一个类,游 ...
- Linux安装Axis C构建WebService服务
在安装Axis C++之前有两个组件是必须安装的,分别是Apache HTTP Server以及用于处理XML的程序Xerces:为了编译Axis以及Apache HTTPD,你的Linux机器还应该 ...
- Boom!!!计算机系统,从理解到爆炸,Bomblab
进入文件夹下 ./bomb 開始执行炸弹 对于炸弹command not found之类的鬼畜情况: chmod 777 bomb 然后再执行炸弹 objdump -d bomb > bomb. ...
- bash shell最基本的语法
1 shell语句的基本构成 shell每个基本的构成元素之间都相隔一个空格. 比如[ -e file ],[.-e.file.]这四个基本元素之间都相隔了一个空格. 同样的道理[ ! -e file ...
- delphi 中OutputDebugString 函数的妙用(使用DebugView或者Pascal Analyzer软件,在运行过程中就能监视和捕捉日志,而且通过网络就能监视)
原文地址 https://www.peganza.com/delphi-and-outputdebugstring.html 曾经想要实时监控您的Delphi应用程序,并能够查看日志消息吗?当然,您始 ...