虽然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. 新一代Python包管理工具来了

    1 简介 说起Python的包管理工具,大家第一时间想到的肯定是pip.conda等经典工具.但最近我发现了一款新颖的Python包管理工具--pdm,它受到PEP582(https://www.py ...

  2. JavaScript闭包的那些事

    JavaScript闭包 1.函数在JavaScript中的地位 在介绍闭包之前,可以先聊聊函数在JavaScript中的地位,因为闭包的存在是与函数息息相关的. JavaScript之所以可以称之为 ...

  3. foreEach 跳出循环

    const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; const _ = require('lodash'); let outArr = []; try { arr. ...

  4. 连接docker里面的mysql失败解决

    场景:在虚拟机的docker容器中安装latest版本的mysql之后,在宿主机中使用navicat连接虚拟机中的mysql出现下图报错: 解决方法: 1.首先docker ps命令查看正在运行的容器 ...

  5. 关于String不可变的一些理解

    原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/11683720.html 一直对String不可变感到疑问, 不知为何说String是不可变的, ...

  6. 问题描述:Navicat连不上MySQL数据库

    发现Navicat连不上MySQL后我首先觉得是MySQL的服务没有打开, 然后再cmd里面 启动MySQL服务 输入: net start mysql 发现没有此服务,然我网上找了一下 先初始化My ...

  7. gpg 使用入门

    1. 生成秘钥 gpg --full-generate-key 等价于 gpg --full-gen-key Real name: yellowconvict为该秘钥的名字,也称为 USER-ID 在 ...

  8. 论文解读(DAEGC)《Improved Deep Embedded Clustering with Local Structure Preservation》

    Paper Information Title:<Attributed Graph Clustering: A Deep Attentional Embedding Approach>Au ...

  9. 使用Redis完成定时任务

    应用场景:在订单业务中,有时候需要对订单设置有效期,有效期到了后如果还未支付,就需要修改订单状态; 与设备进行长链接,如果一段时间内没有收到设备发送的心跳,则修改状态 1.引入依赖 <depen ...

  10. [LeetCode]1464. 数组中两元素的最大乘积

    给你一个整数数组 nums,请你选择数组的两个不同下标 i 和 j,使 (nums[i]-1)*(nums[j]-1) 取得最大值. 请你计算并返回该式的最大值. 示例 1: 输入:nums = [3 ...