vue-cli webpack 引入jquery的方法


Posted in jQuery onJanuary 10, 2018

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

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

在webpack.base.conf.js里加入

var webpack = require("webpack")

在module.exports的最后加入

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

然后一定要重新 run dev

在main.js 引入就ok了import $ from 'jquery'

下面看下vue 引入jquery的方法

1、npm 安装jquery

npminstall jquery --save

2、build/webpack.base.conf.js

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

3、main.js 中引入jquery

import $ from 'jquery'

4、eslint 

下一步就是要修改根目录下.eslintrc.js文件了,在改文件的module.exports中,为env添加一个键值对 jquery: true 就可以了

总结

以上所述是小编给大家介绍的vue-cli webpack 引入jquery的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jquery实现抽奖功能
Oct 22 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 #jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 #jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 #jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 #jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 #jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 #jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 #jQuery
You might like
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
JS继承 笔记
2011/07/13 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
vue将data恢复到初始状态 && 重新渲染组件实例
2020/09/04 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
Python制作词云的方法
2018/01/03 Python
Python循环结构的应用场景详解
2019/07/11 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
python程序 创建多线程过程详解
2019/09/23 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
使用npy转image图像并保存的实例
2020/07/01 Python
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
实习自我鉴定范文
2013/10/30 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
Nginx内网单机反向代理的实现
2021/11/07 Servers