虽然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. [HZOI] 山海经 题解

    0.题目大意 给出一个序列,每次查询一个区间的最大子段和的端点和值.序列长度 \(n \le 10^{5}\) . 1.思路 显然应该使用线段树.题目要求每次求一个区间的最大子段和,那么在线段树节点中 ...

  2. onerror事件捕获网页中的错误

    转载请注明来源:https://www.cnblogs.com/hookjc/ <html><head><script type="text/javascrip ...

  3. 安装 mysql 8.0后;root用户在客户端连接不上

    --- mysql workbench Failed to Connect to MySQL at 10.211.55.6:3306 with user root Authentication plu ...

  4. TableView 常用技巧与功能详解

    分割线顶格iOS8 UITableview分割线顶格的做法 //iOS8 Cell分割线顶格 if ([_tableView respondsToSelector:@selector(setSepar ...

  5. MySQL 索引、事务与存储引擎

               MySQL 索引.事务与存储引擎 1.索引 2.事务 3.存储引擎 1.索引: 索引的概念 : 索引是一个排序的列表,在这个列表中存储着索引的值和包含这个值的数据所在行的物理地址 ...

  6. c++ 堆栈和内存管理

    stack(栈),heap(堆) Stack:是存在于某作用域(scope)的一个内存空间(memory space).例如当你调用函数,函数本身即会形成一个stack用来放置它所接收的参数,返回地址 ...

  7. drop、truncate、delete的区别

    (1)DELETE语句执行删除的过程是每次从表中删除一行,并且同时将该行的删除操作作为事务记录在日志中保存以便进行进行回滚操作. TRUNCATE TABLE 则一次性地从表中删除所有的数据并不把单独 ...

  8. 基于GDAL库,读取.nc文件(以海洋表温数据为例)C++版

    对于做海洋数据处理的同学,会经常遇到nc格式的文件,nc文件的格式全称是NetCDF,具体的详细解释请查询官网[https://www.unidata.ucar.edu/software/netcdf ...

  9. tomcat安装笔记

    安装Tomcat 1.下载安装包.上传服务器.解压. 官网下载地址Apache Tomcat - Apache Tomcat 8 软件下载 [root@test /]# mkdir /root/tom ...

  10. opencv笔记-SimpleBlobDetector

    通用的 Blob 检测方法包括:Laplacian of Gaussian(LoG), Difference of Gaussian(DoG), Derterminant of Hessian(DoH ...