jquery在vue脚手架中的使用方式示例


Posted in jQuery onAugust 29, 2017

本文介绍了jquery在vue脚手架中的使用方式示例,分享给大家,具体如下:

1:在各个vue文件中使用

<script>
import '../assets/js/jquery-1.10.2.min.js'
export default {
 data() {
  return {
 },
 watch: {
 },
 created: function() {
 },
 methods: {
  list() {
   this.$router.push({
    path: 'list'
   });
  }, 
 },
}
$(document).ready(function(){
  $('.span123').click(function(){
    alert('123')
  })
})
</script>

这种方式不会影响原来VUE文件中的$的使用,完全可行;但是需要每个vue文件都引入一遍;

2:在入口文件app.vue中整体引入,不会报错

3:在main.js中整体引入,

4:在index.html中整体引入

以上3中方法经过亲测,不会报错,但是VUE文件中的JS也不会执行,不可行;

下面的方法经过亲测,完全可行;

通过npm安装依赖引入

1:通过npm安装依赖引入

npm install jquery -S

2:修改webpack配置文件

build/webpack.base.conf.js

...
var webpack = require("webpack") // 1. 确保引入 webpack,后面会用到

module.exports = {
 ...
 resolve: {
  extensions: ['.js', '.vue', '.json'],
  modules: [
   ..
  ],
  alias: {
   ...
   // 2. 定义别名和插件位置
   'jquery': 'jquery' 
  }
 },
 plugins: [
  // 3. 配置全局使用 jquery
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    jquery: "jquery",
    "window.jQuery": "jquery"
  })
 ]
}

手动载入

手动下载jQuery 放在static 目录下,如:static/js/jquery.min.js

alias: {
  ...
  // 2. 定义别名和插件位置
  "jquery": path.resolve(__dirname, '../static/js/jquery.min.js') 
},
plugins: [
  // 3. 配置全局使用 jquery
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    jquery: "jquery",
    "window.jQuery": "jquery"
  })
 ]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery 动态粒子效果示例代码
Jul 07 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 #jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 #jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 #jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 #jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 #jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 #jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 #jQuery
You might like
9个PHP开发常用功能函数小结
2011/07/15 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
Python中调用其他程序的方式详解
2019/08/06 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
网上商城创业计划书范文
2014/01/31 职场文书
幼儿教师培训感言
2014/03/08 职场文书
人民调解员培训方案
2014/06/05 职场文书
中秋晚会活动方案
2014/08/31 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
离婚协议书范文
2015/01/26 职场文书
同意报考公务员证明
2015/06/17 职场文书
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android
MySQL存储过程及语法详解
2022/08/05 MySQL