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.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
详解jQuery设置内容和属性
Apr 11 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
PHP_MySQL教程-第一天
2007/03/18 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
vue组件间通信解析
2017/03/01 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
Python读写docx文件的方法
2018/05/08 Python
python yield关键词案例测试
2019/10/15 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
会计学自我鉴定
2014/02/06 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
学校四风对照检查材料
2014/08/28 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
2016年学校招生广告语
2016/01/28 职场文书