如何在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 ...
随机推荐
- battery for stm32
右边两个1N4148的压降都是0.7V,并且3.3-0.7=2.6V & 3-0.7=2.3V 可见在电源3.3V正常供电的情况下,电池处于休息状态,这就有效避免了电池的不必要消耗:
- Android学习之基础知识五—编写聊天界面
第一步:在app/build.grandle添加RecyclerView依赖库 第二步:在activity_main.xml文件中编写主界面:聊天.发送框.发送按钮三个部分 第三步:编写Message ...
- 学习CSS布局 - position
position 为了制作更多复杂的布局,我们需要讨论下 position 属性. 它有一大堆的值,名字还都特抽象,别提有多难记了. 让我们先一个个的过一遍,不过你最好还是把这页放到书签里. 先看下运 ...
- 走近SpringBoot
(博客园不支持MarkDown编辑,看完整版请移步:https://www.zybuluo.com/Allen-llh/note/1199946) 1. (Building a RESTful Web ...
- odooERP系统(框架)总结
1:Odoo 是一个现代化的商业应用套件,使用 AGPL 许可证,并具有客户关系管理(CRM),人力资源,销售,采购,会计,制造,仓库管理,项目管理,以及众多社区模块. 2:它是基于一个模块化,可扩展 ...
- HTML5-应用程序缓存(Application Cache)
一.什么是应用程序缓存? HTML5 引入了应用程序缓存(Application Cache),这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 二.优势 离线浏览 - 用户可在应用 ...
- WebApi系列~HttpClient的性能隐患 - 转
最近在进行开发过程中,基于都是接口开发,A站接口访问B接口接口来请求数据,而在这个过程中我们使用的是HttpClient这个框架,当然也是微软自己的框架,性能当前没有问题,但如果你直接使用官方的写法, ...
- flask-sqlalchemy组件
一.简介 flask本身没有内置orm框架,需要依赖第三方模块,这里介绍flask-sqlalchemy,而flask-sqlalchemy是一个flask的扩展,本质上是对sqlalchemy的进一 ...
- 腾讯云 ubuntu 上tomcat加载项目很慢
问题原因 随机数引起线程阻塞. tomcat不断启动,关闭, 启动关闭.几次后会出现卡死状况.需很久才能加载完成 阿里云同样配置,同样系统,则很难出现卡死状况. 即使出现过几十秒后也会释放出来. 而 ...
- echarts 响应式布局
<body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: ...