vue 项目中使用 jquery

在 vue 项目中使用 jquery，具体步骤如下

1、npm 安装 jquery

命令如下，@ 后边指定安装的 jquery 版本

npm install jquery@3.2.1

不加 @ 会安装最新版本

npm install jquery

命令执行成功后，会在 package.json 文件中自动生成 "jquery": "^3.2.1",

2、在 webpack 中进行配置

找到 webpack.base.conf.js 文件，添加如下配置

首先引入 webpack（已经引入的不用再引）

const webpack = require('webpack')

其次，在 module.exports 中添加如下配置

plugins: [new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery","windows.jQuery": "jquery"    })
],

3、在 main.js 文件中引入 jquery

import $ from 'jquery'

至此，即可在项目中使用 jquery

4、测试

<template><div><button @click="test">测试jquery</button><input type="text" id="t"></div>
</template>
<script>
export default {methods: {test (){alert($("#t").val())}}
}
</script>

vue 项目中使用 jquery相关推荐

在vue项目中引入JQuery
1.安装 npm install jquery --save 2.配置 1.首先在package.json里的dependencies加入"jquery":"^3.6.0 ...
Vue项目中使用Echarts地图（精确到区）
使用地图需要获取地图的json文件这里是免费获取地图json 在原本Echarts图变中你看到的代码是这样的: var uploadedDataURL = "https://geo.dat ...
Vue项目中遇到了大文件分片上传的问题
Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...
Vue笔记——Vue组件中引入jQuery
Vue笔记--Vue组件中引入jQuery 如果想在普通的HTML页面引入jQuer库的话,直接使用<script src="jQuery.js"></scrip ...
在Vue项目中使用LayUI教程且解决laydate无效的问题
在Vue项目中使用LayUI教程且解决laydate无效的问题 1,安装LayUI开发包 2,导入LayUI开发包 3,在挂载函数mounted中加载LayUI组件 4,解决加载LayUI日期组件出现 ...
在vue项目中使用高德地图
需求很重要,有需求你才有努力解决问题的方向,加油! 在我们使用vue构建项目的时候,难免在业务需求上会遇到使用高德地图的时候,这时候问题就来了. 我们该怎么在vue项目中插入高德地图?通过度娘我知道了 ...
如何在vue项目中使用Highmaps(vue+Highmaps)
如何在vue项目中使用Highmaps 功能需求思路分析实现第一步:引入第二步:介绍一下这个world是个啥. 第三步:调用注意点(十分重要) 写在最后功能需求近日我接到了这么一个需求 ...
在vue项目中实现海康威视IOT云眸平台（实时和回放）
上次我们已经提到海康ISC平台的应用,详见在vue项目中实现海康威视ISC平台(实时和回放) 这次记录下海康云眸平台的应用,风格与上一篇文章保持一致,方便食用. 环境先下载安装海康插件HikOpen ...
Bootstrap前端框架学习（一）：Bootstrap在Vue项目中的安装及可视化布局
Bootstrap前端框架学习(一):Bootstrap在Vue项目中的安装及可视化布局 node.js的安装 bootstrap的安装 bootstrap快速布局 node.js的安装我们需要安装 ...

vue 项目中使用 jquery

vue 项目中使用 jquery相关推荐

最新文章

热门文章