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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
利用jQuery解析获取JSON数据
Apr 08 jQuery
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jquery实现拖拽小方块效果
Dec 10 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不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
PHP 文件系统详解
2012/09/13 PHP
php调用C代码的实现方法
2014/03/11 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
PHP异常处理Exception类
2015/12/11 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
用pycharm开发django项目示例代码
2018/10/24 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
2015年班长个人工作总结
2015/04/03 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书