vue項(xiàng)目中實(shí)現(xiàn)全局引入jquery
vue項(xiàng)目全局引入jquery
說(shuō)明：在index.html直接用<script>標(biāo)簽引入，不會(huì)生效的，正確引入姿勢(shì)如下：
1：打開(kāi)package.json文件，手動(dòng)在dependencies中加入如下代碼；
2：運(yùn)行cnpm install，這樣就會(huì)引入版本為2.1.1的jquery作為依賴；
3：打開(kāi)webpack.base.conf.js文件，對(duì)該文件進(jìn)行兩處修改，如下圖：
4：在需要的頁(yè)面（如index.vue）中添加：import $ from 'jquery'，即正確引入jquery，可以在需要的地方使用jquery；
5：重新運(yùn)行項(xiàng)目（npm run dev）即可；
vue引入jquery遇到的坑
引入
$ npm install --save jquery
# 注意這里是 --save 而不是 --save-dev，因?yàn)橐诰€上環(huán)境上用 jquery
使用jquery
在src/app.js里來(lái)引用一下
import 'jquery';
?
// 在 html 中應(yīng)該有 id 為 "hello" 的元素吧，這點(diǎn)相信大家都懂的。
// 這一行作用是把元素的內(nèi)容改成 "change to other text"
$("#hello").text('change to other text');但是竟然報(bào)錯(cuò)了
好像是引入錯(cuò)誤了，嘗試一下以上方法可不可行
import $ from 'jquery';
$("#hello").text('change to other text');
事實(shí)證明是可以的
遇到的坑
當(dāng)引入下方的一個(gè)插件的時(shí)候
src/jquery.changeStyle.js
$.fn.changeStyle = function(colorStr){
? this.css("color", colorStr);
}我們引入src/app.js里
import $ from 'jquery';
import './jquery.changeStyle';
?
$("#hello").text('change to other text');
// 把元素改成紫色
$("#hello").changeStyle('pink');發(fā)現(xiàn)報(bào)錯(cuò)了，跟之前的一樣
那把 import './jquery.changeStyle'; 改成 import changeStyle from './jquery.changeStyle'; 試一下。
發(fā)現(xiàn)并沒(méi)有什么用
發(fā)現(xiàn)src/jquery.changeStyle.js 文件引用了 jquery 這個(gè)插件，可是外面 src/app.js 卻不知道。
我們來(lái)改一下 src/jquery.changeStyle.js 文件的內(nèi)容。
import $ from 'jquery';
?
$.fn.changeStyle = function(colorStr){
? this.css("color", colorStr);
}效果出來(lái)了，這樣是可以的。
但是有一個(gè)問(wèn)題啊，上面的 jquery 插件是我們自己隨意寫的，我們想怎么改都可以，如果是第三方的呢，就是說(shuō)你有可能從網(wǎng)上下載一個(gè)別人寫好的。
這個(gè)時(shí)候，你總不能下載后，再來(lái)改吧。
我們?cè)趺醋瞿兀?/p>
解決辦法
這個(gè)時(shí)候要引入 webpack 的一個(gè)插件：ProvidePlugin。
這個(gè)插件可以有這樣的效果。
不必通過(guò) import/require 使用模塊
把剛才的 src/jquery.changeStyle.js 還原一下。
src/jquery.changeStyle.js
接下來(lái)：在webpack.config.js
module.exports = {
? plugins: [
? ? new webpack.ProvidePlugin({
? ? ? $: 'jquery',
? ? ? jQuery: 'jquery'
? ? }),
? ? ...
? ]
}什么意思呢？很容易理解，以后要遇到或處理 jQuery 或 $ 都會(huì)去自動(dòng)加載 jquery 這個(gè)庫(kù)。
現(xiàn)在我們運(yùn)行一下 npm run dev，效果出來(lái)了。
這個(gè)插件不止可以處理 jquery，還可以處理別的庫(kù)，等你慢慢用它吧。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vuex實(shí)現(xiàn)歷史記錄的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue.js通過(guò)自定義指令實(shí)現(xiàn)數(shù)據(jù)拉取更新的實(shí)現(xiàn)方法
數(shù)據(jù)拉取更新這個(gè)功能相信大家基本都見(jiàn)過(guò)，但是如果要做起來(lái)卻不止如何做起，所以這篇文章給大家分享了vue.js通過(guò)自定義指令實(shí)現(xiàn)的方法，閱讀本文需要對(duì)vue有一定理解，有需要的朋友們下面來(lái)一起看看吧。2016-10-10
這篇文章主要介紹了Vue使用el-dialog關(guān)閉后重置表單方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue項(xiàng)目總結(jié)之文件夾結(jié)構(gòu)配置詳解
這篇文章主要給大家總結(jié)介紹了關(guān)于vue項(xiàng)目之文件夾結(jié)構(gòu)配置的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
解決element-ui的el-dialog組件中調(diào)用ref無(wú)效的問(wèn)題
這篇文章主要介紹了解決element-ui的el-dialog組件中調(diào)用ref無(wú)效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
Vue配合iView實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)的示例代碼
本篇文章主要介紹了Vue配合iView實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
vue實(shí)現(xiàn)驗(yàn)證用戶名是否可用
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)驗(yàn)證用戶名是否可用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
vue+VeeValidate 校驗(yàn)范圍實(shí)例詳解（部分校驗(yàn),全部校驗(yàn)）
validate（)可以指定校驗(yàn)范圍內(nèi)，或者是全局的 字段。而validateAll()只能校驗(yàn)全局。這篇文章主要介紹了vue+VeeValidate 校驗(yàn)范圍（部分校驗(yàn)，全部校驗(yàn)） ,需要的朋友可以參考下2018-10-10
vue項(xiàng)目打包部署到nginx后css樣式失效的問(wèn)題及解決方法
我將自己的前端Vue項(xiàng)目,經(jīng)過(guò)build生成的dist文件夾copy到nginx的html文件夾中,然后寫了配置文件,運(yùn)行訪問(wèn)后發(fā)現(xiàn)頁(yè)面css樣式?jīng)]有加載到,下面給大家介紹vue項(xiàng)目打包部署到nginx后css樣式失效的問(wèn)題及解決方法,感興趣的朋友一起看看吧2024-12-12
這篇文章主要給大家介紹了關(guān)于如何在Vue中配置代理服務(wù)器的相關(guān)資料,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-12-12