虽然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. linux关闭swap

    #(1)临时关闭swap分区, 重启失效; swapoff -a #(2)永久关闭swap分区 sed -ri 's/.*swap.*/#&/' /etc/fstab 也可以在sysctl.c ...

  2. Grad-CAM:Visual Explanations from Deep Networks via Gradient-based Localization

    目录 Grad-CAM:Visual Explanations from Deep Networks via Gradient-based Localization 1.Abstract 2.Intr ...

  3. python初学笔记之列表推导式

    列表推导式(又称列表解析式)提供了一种简明扼要的方法来创建列表.注意:简而言之,就是把普通的多行for循环压缩成一行代码,这种压缩语法适用于列表.字典.集合等可迭代数据结构(iterables).创建 ...

  4. C# 将OFD转为PDF

    OFD格式的文档是一种我国独有的国家标准版式的文档,在不同场景需求中,可以通过格式转换的方法将PDF转为OFD,或者将OFD转为PDF.本次内容,将通过C#程序介绍如何实现由OFD到PDF的转换,并附 ...

  5. 趁着同事玩游戏偷偷认识k8s一家子补补课

    趁着同事玩偷偷认识k8s一家子补补课 Kubernetes集群这个大家庭在容器化时代能够新军崛起,要感谢其众多可靠稳定,工作认真负责的优质成员. 这些兄弟姐妹们为集群提供故障转移和高可用性,保证k8s ...

  6. 湖人季后赛淘汰出局 - For James 2021.6.4

    今天有NBA季后赛湖人主场对太阳的G6比赛,之前湖人2-3落后,这场比赛输了就被淘汰了.上午特意看了比赛的直播,期望着湖人能赢下这场,这样还有打G7的机会,也就还有进入下一轮的机会.最后湖人还是输了这 ...

  7. iptables简单使用

    1.安装iptables yum install iptables-services 2.iptables简单使用 iptables防火墙文件路径/etc/sysconfig/iptables sys ...

  8. JDK8 的 Lambda、Stream、LocalDate

    前言 本篇主要讲述是Java中JDK1.8的一些新语法特性使用,主要是Lambda.Stream和LocalDate日期的一些使用讲解. 作者:虚无境 来源:cnblogs.com/xuwujing/ ...

  9. root登陆530 Permission denied、530 Login incorrect解决

    感谢大佬:https://blog.51cto.com/3241766/2316986?source=dra 背景:由于云平台上22端口不对外放开,sftp使用不了,故选择ftp服务 操作系统版本: ...

  10. 自定义的类实现copy操作

    1.自定义类实现copy操作 让类遵守NSCopying协议 实现 copyWithZone:方法,在该方法中返回一个对象的副本即可. 在copyWithZone方法中,创建一个新的对象,并设置该对象 ...