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

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

  1. npm install jquery --save-dev

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

  1. module.exports = {
  2. plugins: [
  3. new webpack.ProvidePlugin({
  4. $: 'jquery',
  5. jquery: 'jquery',
  6. 'window.jQuery': 'jquery',
  7. jQuery: 'jquery'
  8. })
  9. ]
  10. ...
  11. }

在文件顶部添加

  1. const webpack = require('webpack')

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

  1. module.exports = {
  2. globals: {
  3. "$": true,
  4. "jQuery": true
  5. },
  6. ...

现在你可以在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. 关于html的a标签的target="__blank "的安全漏洞问题

    使用场景:最近项目中使用一个a标签的 target="__blank "链接跳转 页面,打开一个新的 pdf文件(或者外部的一个网页),然后在chrome浏览器中快速的滑动的时候, ...

  2. webpack4升级extract-text-webpack-plugin和UglifyJsPlugin问题

    webpack4升级extract-text-webpack-plugin和UglifyJsPlugin问题 1.  使用了extract-text-webpack-plugin插件后,编译出错,代码 ...

  3. 分布式计算(四)Azkaban安装

    Azkaban是一个批量工作流任务调度器,使用Java语言开发.用于在一个工作流内以一个特定的顺序运行一组工作和流程.Azkaban使用job配置文件建立任务之间的依赖关系,并提供一个易于使用的web ...

  4. spring-cloud-starter-feign 等jar无法reimport的解决方案

    <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> &l ...

  5. Android java.lang.RuntimeException: Unable to instantiate activity ComponentInfo 特殊异常

    本来是不想写的,因为这个异常太常见了,而且也容易处理.但是还是决定记录一下,因为之前遇到过,没留心,今天又遇到了,苦逼了,想了好大一会儿才想起来. 通常容易找的就不写了,今天写个特殊的. 现象:当你在 ...

  6. SkylineGlobe 如何使用二次开发接口创建粒子效果

    SkylineGlobe在6.6版本,ICreator66接口新增加了CreateEffect方法,用来创建粒子效果对象: 以及ITerrainEffect66对象接口,可以灵活设置粒子效果对象的相关 ...

  7. SkylineGlobe SFS发布的WFS和WMS服务测试

    SkylineGlobe SFS发布的WFS服务:http://localhost/SFS/streamer.ashx?service=wfs&request=GetCapabilities& ...

  8. 推荐几本对于Python初学者比较好的书籍(内含PDF)

    我们提供一个初学者最好的Python书籍列表.Python是一个初级程序员可以学习编程的最友好语言之一.为了帮助您开始使用Python编程,我们分享此列表.泡一杯茶,选一本书阅读,开始使用Python ...

  9. linux 开机进入initramfs无法开机

    4/4 用fsck命令开始检查.修复(fsck是个很好用了磁盘检测修复命令)输入:fsck -t ext4 /dev/sda1 (-t是指定文件系统类型:现在的多半是ext3和ext4,不知道,你就一 ...

  10. 通过chrome浏览器分析网页加载时间

    今天趁着下班的时间看了下chrome浏览器的网页加载时间分析工具和相关文档,简单写点儿东西记录一下. 以百度首页加载为例,分析下一张图片1.jgp(就是背景图)的加载时间 看右侧的Timing标签,从 ...