Vue2.0 --- vue-cli脚手架中全局引入JQ

第一步:安装jQuery

npm/cmpn方式安装(默认安装1.7.X版本的JQ)

npm/cnpm install jQuery

如果想安装更高版本的JQ那么可以选择在package.json文件下面这个位置添加代码断(当前图片安装的是2.2.3版本,如果想安装更高或者其他可以更改版本号)

这里写图片描述

然后在命令行窗口中输入指令,即可完成安装

npm install

第二步:更改webpack.base.conf.js文件

在文件指定位置添加代码

var webpack = require('webpack');
plugins: [new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery" }) ],

位置如图所示:

这里写图片描述

第三步:(必须操作),重启一下服务器不然会报错,重启之后就好了

npm run dev

第四步:更改main.js文件

添加代码

import $ from 'jquery'

如图所示: 
这里写图片描述

之后在文件中即可随意使用JQ,不过切记不能直接使用,必须这样

$(function(){ $('.button').click(function(){ alert('JQ引入测试'); }); });

如果不写$(function(){ }),会无法生效的

错误写法:

$('.button').click(function(){ alert('JQ引入测试'); });
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_19327991/article/details/78148930

本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=jihaajb&title=Vue2.0 --- vue-cli脚手架中全局引入JQ

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370418.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python笔记全_Python笔记

一、数据结构和序列1.1、元组:有一种固定长度,不可修改的python对象序列tup 1,2,3 tup : (1,2,3)tup tuple([4,0,2]) tup : (4,0,2)tup[0] 4元组添加元素:tup (["foo",[1,2],True])tup[1].append(3)tup : ("foo",[1,…

java 分布式编译_linux分布式编译distcc和ccache的部署

unset LANGUAGEexport LANG"en"cd /home/kingsoftmkdir distcccd distccrpm包用:rpm -ivh ...bz2包用:tar -xvf ...进入distcc解压后的目录./configure && make && make installmkdir /usr/lib/distccmkdir /usr/lib/distcc/b…

Unity——用UnityEditor拷贝FBX中的AnimationClip

最近有个新需求,要用代码添加动画的事件,但是Unity不能直接修改FBX中的AnimationClip 在Animation窗口中可以看到,AnimationClip是Read-Only状态,用代码修改这个AnimationClip也是不会生效的,包括用代码添加事件 解决方…

sql 分页存储过程

ALTER procedure [dbo].[fenye]pagesize int, --每页显示数量pageCurrent int, --当前页tablename varchar(20), --表名field varchar(20), --显示的列名(eg: id,name)where varchar(20), --筛选条件 (eg: name not null)orderBy varchar(20), --排序的列名(eg: id …

使用Hadoop计算共现矩阵

这篇文章继续我们在MapReduce的数据密集型文本处理一书中实现MapReduce算法的系列。 这次,我们将从文本语料库创建单词共现矩阵。 本系列以前的文章是: 使用MapReduce进行数据密集型文本处理 使用MapReduce进行数据密集型文本处理-本地聚合第二部分 共…

HTML5 拖放、交换位置

设置元素为可拖放 draggable 属性设置为 true: <img draggable"true" /> 拖动什么 - ondragstart 和 setData() dataTransfer.setData() 方法设置被拖数据的数据类型和值: function drag(e) { e.dataTransfer.setData("text/html", value); }注&…

java 工作6年 面试_为什么不想搞Java了,6年经验去面试5分钟结束,现在Java面试为何这么难...

3、Java并发什么是可重入锁、乐观锁、悲观锁、公平锁、非公平锁、独占锁、共享锁&#xff1f;讲讲ThreadLocal 的实现原理&#xff1f;ThreadLocal 作为变量的线程隔离方式&#xff0c;其内部是如何做的&#xff1f;说说InheritableThreadLocal 的实现原理&#xff1f;并发包中…

mvc如何嵌套第三方页面_长文观点丨为什么我不再使用MVC框架?

原创&#xff1a; 张卫滨 译 Jean-Jacques Dubray是一名资深工程师&#xff0c;他最近引入了一个新的模式&#xff1a;状态-行为-模(State-Action-Model&#xff0c;SAM)。SAM是一个函数式反应型的编程模式&#xff0c;它致力于简化数据Model和View之间的交互。它究竟有何优点值…

JSON和XML的区别

转载于:https://www.cnblogs.com/mr-wuxiansheng/p/6974239.html

屏幕适配

rem是什么&#xff1f; rem&#xff08;font size of the root element&#xff09;是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位&#xff0c;em&#xff08;font size of the element&#xff09;是指相对于父元素的字体大小…

【存储过程】MySQL存储过程/存储过程与自定义函数的区别

---------------------------存储过程-------------------- 语法: 创建存储过程: CREATE [definer {user|current_user}] PROCEDURE sp_name ([ proc_parameter [,proc_parameter ...]]) [ characteristics..] routime_body 其中: proc_parameter : [IN|OUT|INOUT] parameter_…

Java死锁故障排除和解决

JavaOne年度会议的一大优点是&#xff0c;主题专家介绍了几个技术和故障排除实验室。 其中的一个实验室今年特别吸引了我的注意力&#xff1a;“ HOL6500-查找和解决Java死锁 ”&#xff0c;由Java冠军Heinz Kabutz提出 。 这是我在该主题上看到的最好的演示之一。 我建议您自己…

java.util.scanner sc_关于Java的Scanner的问题,菜鸟求各大神解答

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼package leetcode;import java.util.ArrayList;import java.util.Collections;import java.util.Comparator;import java.util.HashMap;import java.util.List;import java.util.Map;import java.util.Map.Entry;import java.util.…

3. HTML中的容器标签

什么是容器标签&#xff1f;在HTML开发中我们常常会使用一类标签作为容器放置一些内容&#xff0c;我们把这类标签称之为容器标签&#xff0c;可以作为容器标签的包括列表标签、表格标签、框架标签、布局标签&#xff0c;在这里我们就来总结下这些内容。 列表标签 1 <!-- 无…

python自带sqlite库_Python标准库之sqlite3使用实例

Python自带一个轻量级的关系型数据库SQLite。这一数据库使用SQL语言。SQLite作为后端数据库&#xff0c;可以搭配Python建网站&#xff0c;或者制作有数据存储需求的工具。SQLite还在其它领域有广泛的应用&#xff0c;比如HTML5和移动端。Python标准库中的sqlite3提供该数据库的…

GitHub上Java的Bloom Bloom实现

布隆过滤器是集数据结构的一种 。 对于那些不了解的对象&#xff0c;“设置数据结构”仅包含一个主要方法。 它仅用于确定特定元素是否包含在一组元素中。 大多数数据结构&#xff08;例如Hash Map &#xff0c; Linked List或Array &#xff09;都可以相当轻松地创建此函数。 …

Hibernate(十五):QBC检索、本地SQL检索和HQL删除

QBC检索QBC查询就是通过使用Hibernate提供的Query By Criteria API来查询对象&#xff0c;这种API封装了SQL语句的动态拼装&#xff0c;对查询提供了更加面向对象的功能接口。 1&#xff09;通过Critera实现具有条件的查询 1 Test2 public void testCriteria00() {3 …

java 创建连接池失败_java-Presto JDBC连接池创建错误“不支持禁用...

我正在尝试使用Spring-JDBC连接到Presto,并且我正在使用Hikari CP作为数据源.这是我的配置&#xff1a;Beanpublic DataSource myDataSource() {HikariDataSource hikariDataSource new HikariDataSource();hikariDataSource.setDriverClassName("com.facebook.presto.jd…

ni软件管理器_NI 技术支持丨我的 NI 硬件设备不能被识别,怎么办?Windows

这篇指南可以帮助您解决在您的 Windows 系统上无法识别您的 NI 硬件有关的问题。症状包括以下几种情况&#xff1a;连接至 USB 端口时&#xff0c;硬件上的 LED 灯不亮/不闪烁。连接至 USB 后已连接设备的 LED 灯持续闪烁。仅限音频接口&#xff1a;该设备在音频应用程序或 Win…

环境搭建相关

1.检测jre运行环境 java -version 没有的话 按照提示安装 default-jre 够用 http://www.linuxidc.com/Linux/2016-11/136958.htm 否则按照上面处理 2.pycharm下载 https://www.jetbrains.com/pycharm/download/ 选择下载一个linux的 3.下载crackjar http://idea.lanyus.com/jar…