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.pswp.cn/news/370418.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/370418.shtml
英文地址,請注明出處:http://en.pswp.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…