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 Tree Multiselect使用详解
May 02 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
jQuery实现雪花飘落效果
Aug 02 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
PHP封装的字符串加密解密函数
2015/12/18 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
python黑魔法之编码转换
2016/01/25 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
python selenium 弹出框处理的实现
2019/02/26 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
.net面试题
2015/12/22 面试题
介绍一下write命令
2012/09/24 面试题
董事长职责范文
2013/11/08 职场文书
成龙洗发水广告词
2014/03/14 职场文书
改革共识倡议书
2014/08/29 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
出纳工作检讨书
2014/10/18 职场文书
教师节班会开场白
2015/06/01 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
golang json数组拼接的实例
2021/04/28 Golang