如何在vue-cli webpack中全局引入jquery
1.首先执行:npm install jQuery --save-dev,在package.json里加入jQuery。
2.修改build下的webpack.base.conf.js
方法一:
首先加入:
const webpack = require("webpack")
然后在module.exports 对象中加入:

plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
方法二:
先加入:
const webpack = require("webpack")
然后:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'jquery': 'jquery'
}
},
最后:
plugins: [
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
3.在app.vue中调用jquery
mounted: function() {
console.log($);
console.log($('#ss')[0].innerHTML);
},
打印结果:

如何在vue-cli webpack中全局引入jquery的更多相关文章
- vue-cli webpack 中全局引入 jquery
1.安装 jquery npm install jquery --save-dev 2.修改 webpack.base.conf.js 方法一 首先加入: const webpack = requir ...
- vue cli web pack 全局引入jquery
之前 装过,装 npm i —save jquery 然后直接执行了第二步 往后 1,首先在 package.json 里加入, 然后 npm install 2, 在webpack.base.c ...
- 在Vue的webpack中结合runder函数
在Vue的webpack中结合runder函数 1.引入: <h1>下面是vue的内容:</h1> <div id="app"> <log ...
- 如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要 ...
- 如何在 vue 项目里正确地引用 jquery
转载 2016年11月13日 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 / ...
- 如何在 vue 2.0+ 中引入全局的stylus文件,且能正常
由于stylus在引用时,不能像一般的css文件直接在main.js中引用,就算引用了也会只能使用转换后的css,不能使用里面的函数,方法等,原因可能是:在这里引入会被直接编译成css,不能在别的模板 ...
- Vue CLI 3 中文文档
翻译文档 文档翻译全貌 前言 之前写了一篇Vue CLI 3.x 版本的简单体验,当时文档还不全,具体的使用方法并不是很清楚,大概是2月7号,收到Vue CLI 3接近Beta版的提示,作者尤雨溪也讲 ...
- vue-cli3项目中全局引入less sass文件 以及使用本地图片在不同地方规则
第一种直接在main.js中引入,需要声明loader demo: import '!style-loader!css-loader!less-loader!./assets/css/common.l ...
- vue+vuecli+webpack中使用mockjs模拟后端数据
前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTM ...
随机推荐
- idea java 1.5 过时
解决方案: 1.修改maven的setting.xml文件,添加以下内容,此设置为jdk1.8 <profile> <id>jdk-1.8</id> <act ...
- 自学Python之路
自学Python之路[第一回]:初识Python 1.1 自学Python1.1-简介 1.2 自学Python1.2-环境的搭建:Pycharm及python安装详细教程 1.3 ...
- HTML页面中JavaScript能获取到的各种屏幕大小信息
在HTML页面中,通过JavaScript代码访问 window 对象,能够获取到很多表征屏幕大小的信息,下面列举并加以区分. window 对象中的屏幕信息 window.innerheight. ...
- APP Store开发指南
App Store 审核指南 iOS App打包上架超详细流程 ---2017.03 苹果对开发者提交的应用的审核之严格是出了名的,了解苹果的审核标准对于开发者防止应用被拒有着十分重要的意义.几天前苹 ...
- Pipeline in scala——给scala添加管道操作
linux系统中管道这一功能相信大家肯定使用过,比如现在想找到用户目录下文件名包含db的所有文件,ls ~的结果,作为grep db的参数: ➜ ~ ls ~ | grep db kv.mv.db ...
- tensorflow ckpt文件转caffemodel时遇到的坑
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } p.p2 ...
- 支持各种特殊字符的 CSV 解析类 (.net 实现)(C#读写CSV文件)
CSV是一种十分简洁的数据结构,在DOTNET平台实际使用中发现微软官方并没有提供默认的方法,而网上好多例子发现实现并不严谨甚至一些含有明显错误,所以后面自己实现了一个读写工具类,这里发出来希望方便后 ...
- Xamarin android spinner的使用方法
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- ArcGIS 网络分析[2.3] 最近设施点
什么是最近设施点? 仍然举一个生动形象例子说明. 我在大街的某一个点儿上,我急需上厕所,问:我3分钟内能到的最近的厕所在哪? 这就是最近设施点分析(ClosestFacility)--给定搜索半径,基 ...
- phpexcel用法(转)
.php导出excel(多种方法) (2013-03-23 15:44:02) 转载▼ 分类: php 基本上导出的文件分为两种: 1:类Excel格式,这个其实不是传统意义上的Excel文件,只 ...