虽然vue不推荐直接操作DOM,而且也提供了操作DOM的方式。但是在某些时候还是要用到jquery,那么如何引入jquery呢?

费了半天劲,记录一下:

一 : 安装jquery

npm install jquery --save

二 : 配置 在项目 build 里的webpack.base.conf.js

首先在webpack.base.conf.js里加入:(webpack的引入要在第一行)

var webpack = require("webpack")

然后在module.exports的最后加入

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

三:使用 在需要使用的地方引入

import $ from 'jquery';

这样就可以正常调用'$'了

最后注意要重启项目:npm run dev

vue项目如何引用jquery的更多相关文章

  1. vue项目中引用jquery

    1.使用npm安装 npm i jquery --S //jquery要小写 2.在package.json文件dependencies里面加入jq 3.在build文件夹的webpack.base. ...

  2. 在vue项目中引入jquery

    在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...

  3. vue :关于引用jquery的二三问题

    webpack版本:3.6.0 首先是引用jquery. 有两个地方要改. 1 (项目地址)/build/webpack.base.conf.js 2 (项目地址)/src/main.js webpa ...

  4. 如何在Vue项目中引入jQuery?

    假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...

  5. 在vue项目中引用element-ui时 让el-input 获取焦点的方法

    在制作项目的时候遇到一个需求,点击一个按钮弹出一个input输入框,并让输入框获得焦点,项目中引用了ElementUI 在网上查找了很多方法,但是在实际使用中发现了一个问题无论是使用$ref获取inp ...

  6. vue项目中引用echarts的几种方式

    准备工作: 首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下.安装echarts, npm install echarts -S //或   ...

  7. 在vue项目里使用jquery

    1.NPM 安装 jQuery,项目根目录下运行以下代码 npm install jquery --save 2.webpack配置在项目根目录下的build目录下找到webpack.base.con ...

  8. vue-cli3搭建的vue项目中使用jquery

    装包:npm install jquery --save 方式一 全局使用 1)main.js中引入 // jquery import $ from 'jquery' Vue.prototype.$ ...

  9. 脚手架搭建的vue项目里引入jquery和bootstrap

    引入jquery: 1.在cmd输入:npm install jquery,回车,等待.. 2.在webpack.base.conf.js里进行如下操作: 3.在webpack.prod.conf.j ...

随机推荐

  1. CPU飙升排查

    怎么排查CPU飙升 线上有些系统,本来跑的好好的,突然有一天就会出现报警,CPU使用率飙升,然后重启之后就好了.例如,多线程操作一个线程不安全的list往往就会出现这种现象.那么怎么定位到具体的代码范 ...

  2. 计算机网络-5-9-TCP拥塞控制

    TCP拥塞控制 拥塞控制的一般原理 在计算机网络中的链路容量(带宽),交换节点中的缓存和处理机等,都是网络的资源,在某段时间,若对网络中某一资源的需求超过该资源所能提供的可用部分,网络性能就会变坏,这 ...

  3. Maven的安装、配置与使用

    5.Maven 我为什么要学习这个技术? 在JavaWeb开发中,需要使用大量的jar包,我们手动去导入: 如何能够让一个东西自动帮我们导入和配置这个jar包. 由此,Maven诞生! 5.1.Mav ...

  4. CDNDrive 第一个版本发布 & 布客新知第二次备份完成

    CDNDrive 第一个版本发布,新适配五个图床 https://github.com/apachecn/CDNDrive 另外,布客新知第二次备份完成 TutorialsPoint:http://i ...

  5. [POI2010]TEL-Teleportation

    因为题目中要求 \(1 \sim 2\) 的最短路只有 \(5\),于是我们可以考虑直接使用人脑将图分层. 那么我们怎么定义每层的点呢?因为要使 \(1 \sim 2\) 的最短路只有 \(5\),我 ...

  6. DP 专练

    A - 跳蚤电话 观察性质,可以发现每次连边的点一定是有祖先关系的,可以直接挂上去一个,也可以是在中间边上插入一个点. 所以我很自然的想到去计算树上的点的加入顺序,因为一但加入顺序确定,每一次的操作也 ...

  7. JAVA多线程学习六-守护线程

    java中的守护程序线程是一个服务提供程序线程,它为用户线程提供服务. 它的生命依赖于用户线程,即当所有用户线程都死掉时,JVM会自动终止该线程. 有许多java守护程序线程自动运行,例如 gc,fi ...

  8. Vue小白练级之路---001表单验证功能的一般实现思路

    思路: 先各自验证 非空校验 具体规则校验 后兜底校验( 防止用户没输入信息直接登录 ) 实现:( 以 element-ui 为例 ) 在 标签上用 model 动态绑定收集数据的对象(form) 在 ...

  9. 已完成的python项目-环境离线部署

    python环境离线部署 当前生产环境中,有很多基于python开发的工具需要使用. 由于python工具往往涉及到很多依赖,在线状态下,可以通过pip requirements来管理安装. 但有时候 ...

  10. js实现用按钮控制网页滚动、以及固定导航栏效果

    实现效果如下: 页面内有三个按钮,分别控制页面向上.向下移动,以及暂停,并设置有导航栏,在滚动到某一位置时显示.且当用户主动控制鼠标滑轮时,滚动效果自动关闭.本页面只是演示如何实现,进行了简单的布局, ...