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实现的手风琴侧边菜单效果
Mar 29 jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jQuery实现简单聊天室
Feb 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
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
js正确获取元素样式详解
2009/08/07 Javascript
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
axios学习教程全攻略
2017/03/26 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
Python中functools模块的常用函数解析
2016/06/30 Python
matplotlib中legend位置调整解析
2017/12/19 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
Python异常处理操作实例详解
2018/05/10 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
详解python编译器和解释器的区别
2019/06/24 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
会计专业自荐书
2014/07/08 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
交通安全温馨提示语
2015/07/14 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
为Centos安装指定版本的Docker
2022/04/01 Servers