在vue项目中,将juery设置为全局变量的方法


Posted in Javascript onSeptember 25, 2018

1.首先执行:npm install jQuery --save-dev,在package.json里加入jQuery。

2.修改build下的webpack.base.conf.js

方法一:

首先加入:

const webpack = require("webpack")

然后在module.exports 对象中加入:

在vue项目中,将juery设置为全局变量的方法

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项目中,将juery设置为全局变量的方法

以上这篇在vue项目中,将juery设置为全局变量的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
可实现多表单提交的javascript函数
Aug 01 Javascript
初学Javascript的一些总结
Nov 03 Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
jQuery的deferred对象使用详解
Aug 20 Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
js与applet相互调用的方法
Jun 22 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 #Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 #Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 #Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 #Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 #Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 #Javascript
Vue高版本中一些新特性的使用详解
Sep 25 #Javascript
You might like
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
php5数字型字符串加解密代码
2008/04/24 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
javascript验证身份证号
2015/03/03 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
vuex实现购物车功能
2020/06/28 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
利用python实现数据分析
2017/01/11 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
python实现三维拟合的方法
2018/12/29 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
HTML5标签小集
2011/08/02 HTML / CSS
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
信息专业学生学习的自我评价
2014/02/17 职场文书
中式婚礼主持词
2014/03/13 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
关于长城的导游词
2015/01/30 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
党员发展大会主持词
2015/07/03 职场文书