假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project).

在你的vue项目目录下执行:

npm install jquery --save-dev

打开 build/webpack.base.conf.js 文件并添加 plugins:

module.exports = {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
]
...
}

在文件顶部添加

const webpack = require('webpack')

如果你有在使用eslint, 打开 .eslintrc.js  文件添加 global 项

module.exports = {
globals: {
"$": true,
"jQuery": true
},
...

现在你可以在vue项目中随意使用$了

PS: 此方法不需要额外的类似 expose loader 等的插件

如何在Vue项目中引入jQuery?的更多相关文章

  1. 在vue项目中引入jquery

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

  2. 详解如何在vue项目中引入饿了么elementUI组件

    在开发的过程之中,我们也经常会使用到很多组件库:vue 常用ui组件库:https://blog.csdn.net/qq_36538012/article/details/82146649 今天具体说 ...

  3. 如何在vue项目中引入elementUI组件

    个人博客同步文章 https://mr-houzi.com/2018/02/... 前提:已经安装好Vue 初始化vue vue init webpack itemname 运行初始化demo 运行一 ...

  4. 如何在vue项目中引入element-ui

    安装 elementUI npm install element-ui --save 引入elementUI import ElementUI from 'element-ui' import 'el ...

  5. 如何在vue项目中引入阿里巴巴的iconfont图库

    1. 打开 http://www.iconfont.cn/ 2. 选择我们喜欢的图标,点击上面的小车,加入图标库,即右侧的购物车 3.点击购物车,点击下载代码 4.解压下载的文件夹,将文件夹复制到 a ...

  6. vue项目中引入Sass

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...

  7. 如何在Vue项目中给路由跳转加上进度条

    1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大 ...

  8. 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  9. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

随机推荐

  1. Word2010中如何在斜线表格中添加文字

    http://jingyan.baidu.com/article/335530daa4127f19cb41c331.html

  2. PAT A1118 Birds in Forest (25 分)——并查集

    Some scientists took pictures of thousands of birds in a forest. Assume that all the birds appear in ...

  3. PHPStorm FTP upload could not change to work directory 无法更改目录

    使用PHPStorm 2016 2.2版本 设置代码及时上传的时候遇到了这个问题,无法上传代码. 配置好了FTP之后去测试,是正常的,如下图一所示,也开启了那个被动模式(见图二),但是去上传代码的时候 ...

  4. MFC入门(一)-- 第一个简单的windows图形化界面小程序(打开计算器,记事本,查IP)

    ////////////////////////////////序//////////////////////////////// 大约三年前,学过一些简单的编程语言之后其实一直挺苦恼于所写的程序总是 ...

  5. C# Hashtable vs Dictionary 学习笔记

    Hashtable 和 Dictionary 存储的都是键值对,我的理解是Dictionary是Hashtable的泛型实现. Hashtable的键和值都是object类型.所以,key和value ...

  6. 通过jQuery Ajax使用FormData对象上传文件 (转载)

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件.jQuery 2.0+ ...

  7. CF633H Fibonacci-ish II 莫队、线段树、矩阵乘法

    传送门 这题除了暴力踩标程和正解卡常数以外是道很好的题目 首先看到我们要求的东西与\(Fibonacci\)有关,考虑矩阵乘法进行维护.又看到\(n \leq 30000\),这告诉我们正解算法其实比 ...

  8. React-redux-saga

    新建sagas.js import { takeEvery , put} from 'redux-saga/effects' import axios from 'axios'; import { G ...

  9. 学习Key与Value的集合hashtable

    你可以创建一个hashtable: 你可以使用foreach方法,把hashtable的key与value循环写出来: 在控制台屏幕输出: 如果只需把key输出: 如果只想把值循环输出: 测试输出结果 ...

  10. (原创)odoo在docker环境下无法备份

    odoo容器内置postgresql-client版本和数据库版本不一致,安装和数据库版本相同或者更高版本的客户端 参考:https://www.postgresql.org/download/lin ...