如何在Vue项目中引入jQuery?
假设你的项目由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?的更多相关文章
- 在vue项目中引入jquery
在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...
- 详解如何在vue项目中引入饿了么elementUI组件
在开发的过程之中,我们也经常会使用到很多组件库:vue 常用ui组件库:https://blog.csdn.net/qq_36538012/article/details/82146649 今天具体说 ...
- 如何在vue项目中引入elementUI组件
个人博客同步文章 https://mr-houzi.com/2018/02/... 前提:已经安装好Vue 初始化vue vue init webpack itemname 运行初始化demo 运行一 ...
- 如何在vue项目中引入element-ui
安装 elementUI npm install element-ui --save 引入elementUI import ElementUI from 'element-ui' import 'el ...
- 如何在vue项目中引入阿里巴巴的iconfont图库
1. 打开 http://www.iconfont.cn/ 2. 选择我们喜欢的图标,点击上面的小车,加入图标库,即右侧的购物车 3.点击购物车,点击下载代码 4.解压下载的文件夹,将文件夹复制到 a ...
- vue项目中引入Sass
Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...
- 如何在Vue项目中给路由跳转加上进度条
1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大 ...
- 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap
1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
随机推荐
- webpack4升级extract-text-webpack-plugin和UglifyJsPlugin问题
webpack4升级extract-text-webpack-plugin和UglifyJsPlugin问题 1. 使用了extract-text-webpack-plugin插件后,编译出错,代码 ...
- 学习 JS滚轮事件(mousewheel/DOMMouseScroll)
学习 JS滚轮事件(mousewheel/DOMMouseScroll) 1-1 滚轮事件兼容性的差异 IE,chrome,safari 浏览器都使用 onmousewheel, 只有firefo ...
- PAT A1074 Reversing Linked List (25 分)——链表,vector,stl里的reverse
Given a constant K and a singly linked list L, you are supposed to reverse the links of every K elem ...
- [04] 高级映射 association和collection
之前我们提到的映射,都是简单的字段和对象属性一对一,假设对象的属性也是一个对象,即涉及到两个表的关联,此时应该如何进行映射处理? 先看两张表,author 和 book: 业务上对应关系为,一个 ...
- WPF C#仿ios 安卓 红点消息提示
原文:WPF C#仿ios 安卓 红点消息提示 先把效果贴出来,大家看看. 代码下载地址: http://download.csdn.net/detail/candyvoice/9730751 点击+ ...
- iOS开发简记(3):tips提示
我有一个需求:在点击或长按某个按钮时,需要显示提示,包括简单的文字提示,还有复杂一点的图片甚至是动态图的提示(可能还要加上文字). (1)文字tips 使用之前介绍的qmuikit里面的QMUITip ...
- 天气提醒邮件服务器(python + scrapy + yagmail)
天气提醒邮件服务器(python + scrapy + yagmail) 项目地址: https://gitee.com/jerry323/weatherReporter 前段时间因为xxx上班有时候 ...
- Linux下DNS服务(Bind9)之Web管理利器-NamedManager部署说明
NamedManager 是一个基于Web的DNS管理系统,可用来添加.调整和删除DNS的zones/records数据.它使用Bind作为底层DNS服务,提供一个现代Ajax的Web界面,支持 IP ...
- mysql操作命令梳理(1)-索引
1.创建索引索引的创建可以在CREATE TABLE语句中进行,也可以单独用CREATE INDEX或ALTER TABLE来给表增加索引.以下命令语句分别展示了如何创建主键索引(PRIMARY KE ...
- SpringCloud设定Feign底层实现
1. 概述 版本: spring-boot: 1.5.9.RELEASE spring-cloud: Dalston.SR5 在默认情况下 spring cloud feign在进行各个子服务之间的 ...