虽然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. docker daemon

    docker启动最先加载Docker Daemon. Docker Daemon的启动文件放在/etc/systemd/system/docker.service.d目录中,如果没有则手工创建该目录并 ...

  2. Java 中对象锁和类锁的区别? 关键字 Synchronized的用法?

    一  对象锁和类锁的关系 /* * 对象锁和[类锁] 全局锁的关系? 对象锁是用于对象实例方法,或者一个对象实例上的 this 类锁是用于类的静态方法或者一个类的class对象上的. Ag.class ...

  3. ApacheCN 大数据译文集(二) 20211206 更新

    Hadoop3 大数据分析 零.前言 一.Hadoop 简介 二.大数据分析概述 三.MapReduce 大数据处理 四.基于 Python 和 Hadoop 的科学计算和大数据分析 五.基于 R 和 ...

  4. js 斐波那契数列的获取和曲线的实现(每日一更)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. Java基础复习(五)

    1. 接口是否可继承接口? 抽象类是否可实现(implements)接口? 抽象类是否可继承具体类(concrete class)? 抽象类中是否可以有静态的main方法? 接口可以继承接口.抽象类可 ...

  6. 接口里的default,static方法

    我们都知道接口里的变量默认隐含类型是public static final,也是就是说是常量.而方法默认类型是public abstract,所以接口的方法都是抽象方法,但是事实真的是这样吗? 我的P ...

  7. Eclipse项目上的红叉解决方案

    Eclipse项目上存在红叉,但是又不影响运行,同时展开项目未指明任何内容出错,可以按如下步骤进行处理: 0.查看Problems视图,定位错误,发现处理之: 1.检查Build Path中的各个依赖 ...

  8. ios 类别和扩展-赵小波

    类别 @interface ClassName ( CategoryName ) // method declarations @end Category在iOS开发中使用非常频繁.尤其是在为系统类进 ...

  9. linux内核可以接受的参数 | Linux kernel启动参数 | 通过grub给内核传递参数

    在Linux中,给kernel传递参数以控制其行为总共有三种方法: 1.build kernel之时的各个configuration选项. 2.当kernel启动之时,可以参数在kernel被GRUB ...

  10. 【发点感慨】我的cnblogs的文章被爬到了别的网站,阅读量比在cnblogs上还要高

    近期我写了挺多VictoriaMetrics的文章,在搜索相关文章的时候发现,我的文章被别的网站爬去了: 写写技术文章就是无偿分享给别人看的,越多人看到越多人受益,这一点没毛病. 但是: 爬了别人的文 ...