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)文章
Vue出現(xiàn)彈出層時(shí)禁止底部頁(yè)面跟隨滑動(dòng)
本文主要介紹了Vue出現(xiàn)彈出層時(shí)禁止底部頁(yè)面跟隨滑動(dòng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡(jiǎn)便方法
走馬燈功能在展示圖片時(shí)經(jīng)常用到,下面這篇文章主要給大家介紹了關(guān)于element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡(jiǎn)便方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
這篇文章主要給大家介紹了關(guān)于vue使用Echarts繪制地圖的相關(guān)資料,Apache ECharts一個(gè)基于JavaScript的開(kāi)源可視化圖表庫(kù),提供了常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖,用于統(tǒng)計(jì)的盒形圖,需要的朋友可以參考下2023-09-09
element-ui中el-upload多文件一次性上傳的實(shí)現(xiàn)
這篇文章主要介紹了element-ui中el-upload多文件一次性上傳的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
Vue + Echarts頁(yè)面內(nèi)存占用高的問(wèn)題解決方案
點(diǎn)擊左側(cè)的菜單可以切換不同的看板,有些看板頁(yè)面中的報(bào)表比較多,用戶多次切換后頁(yè)面的內(nèi)存占用可以上升為GB級(jí),嚴(yán)重時(shí)導(dǎo)致頁(yè)面內(nèi)存溢出,使得頁(yè)面崩潰,極大影響了用戶體驗(yàn),本文給大家介紹Vue + Echarts頁(yè)面內(nèi)存占用高的問(wèn)題解決方案,感興趣的朋友一起看看吧2024-02-02
基于element-ui對(duì)話框el-dialog初始化的校驗(yàn)問(wèn)題解決
這篇文章主要介紹了基于element-ui對(duì)話框el-dialog初始化的校驗(yàn)問(wèn)題解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
35個(gè)最好用的Vue開(kāi)源庫(kù)(史上最全)
無(wú)論是開(kāi)發(fā)新手還是經(jīng)驗(yàn)豐富的老手，我們都喜歡開(kāi)源軟件包。本文主要介紹了35個(gè)最好用的Vue開(kāi)源庫(kù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
這篇文章主要介紹了vue中可以綁定多個(gè)事件嗎，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
一文教會(huì)你如何運(yùn)行vue項(xiàng)目
最近因?yàn)楣卷?xiàng)目問(wèn)題,開(kāi)始學(xué)習(xí)vue,這篇文章主要給大家介紹了關(guān)于如何運(yùn)行vue項(xiàng)目的相關(guān)資料,文中還介紹了如何運(yùn)行別人的項(xiàng)目,需要的朋友可以參考下2022-06-06
組件是有name屬性的,匹配的就是組件的name,下面這篇文章主要給大家介紹了關(guān)于vue中組件的name屬性含義和用法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12