假设你的项目由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. BLDC

    BLDC working principle: https://www.bilibili.com/video/av31423350?from=search&seid=1569792618769 ...

  2. ubuntu开机自动运行用Qt写的程序

    这里介绍一种在ubuntu系统开机自动运行使用Qt编写的程序的方法.首先要注意要自动运行Qt编的程序,不需要先打开Qt,而是直接运行编译好的与工程名同名的可执行文件即可,比如我要运行的工程为QRDec ...

  3. keystore

    p12转keystorekeytool -v -importkeystore -srckeystore temp.p12 -srcstoretype PKCS12 -destkeystore temp ...

  4. Linux内核访问用户空间文件:get_fs()/set_fs()的使用

    测试环境:Ubuntu 14.04+Kernel 4.4.0-31 关键词:KERNEL_DS.USER_DS.get_fs().set_fs().addr_limit.access_ok. 参考代码 ...

  5. IDEA注册jar包使用和常用插件

    IDEA注册jar包使用 点击获取下载地址或生成注册码 一.安装完成后,先不启动,首先如下图修改相关的地方. 二.启动IDEA,并且激活IDEA IDEA插件仓库 IntelliJ IDEA Plug ...

  6. python多版本共存问题(以2.7和3.5系列版本为例)

    1.0 下载Python2.7x和Python3.5x版本 2.0 安装Python 3.0 配置环境变量,分别添加至path路径 4.0 只修改Python27文件中的.exe文件(这样系统默认为P ...

  7. CF1039D You Are Given a Tree 根号分治、二分、贪心

    传送门 似乎直接做不太好做-- 当你不会做的时候就可以考虑根号算法了(或许是这样的 考虑如果只有一个询问如何计算答案. 显然是可以贪心的,思路与NOIP2018D1T3是相同的.每一个点向上传一条链, ...

  8. Vue-详解设置路由导航的两种方法: <router-link :to="..."> 和router.push(...)

    一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...

  9. echarts 响应式布局

    <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: ...

  10. 51Nod 1705 七星剑

    一道很新颖的概率DP,我看数据范围还以为是有指数级别的复杂度的呢 记得有人说期望要倒着推,但放在这道题上,就咕咕了吧. 我们考虑正着概率DP,设\(fi\)表示将剑升到\(i\)颗星花费的期望,这样我 ...