vue項目中實現(xiàn)全局引入jquery
vue項目全局引入jquery
說明：在index.html直接用<script>標(biāo)簽引入，不會生效的，正確引入姿勢如下：
1：打開package.json文件，手動在dependencies中加入如下代碼；
2：運行cnpm install，這樣就會引入版本為2.1.1的jquery作為依賴；
3：打開webpack.base.conf.js文件，對該文件進(jìn)行兩處修改，如下圖：
4：在需要的頁面（如index.vue）中添加：import $ from 'jquery'，即正確引入jquery，可以在需要的地方使用jquery；
5：重新運行項目（npm run dev）即可；
vue引入jquery遇到的坑
引入
$ npm install --save jquery
# 注意這里是 --save 而不是 --save-dev，因為要在線上環(huán)境上用 jquery
使用jquery
在src/app.js里來引用一下
import 'jquery';
?
// 在 html 中應(yīng)該有 id 為 "hello" 的元素吧，這點相信大家都懂的。
// 這一行作用是把元素的內(nèi)容改成 "change to other text"
$("#hello").text('change to other text');但是竟然報錯了
好像是引入錯誤了，嘗試一下以上方法可不可行
import $ from 'jquery';
$("#hello").text('change to other text');
事實證明是可以的
遇到的坑
當(dāng)引入下方的一個插件的時候
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)報錯了，跟之前的一樣
那把 import './jquery.changeStyle'; 改成 import changeStyle from './jquery.changeStyle'; 試一下。
發(fā)現(xiàn)并沒有什么用
發(fā)現(xiàn)src/jquery.changeStyle.js 文件引用了 jquery 這個插件，可是外面 src/app.js 卻不知道。
我們來改一下 src/jquery.changeStyle.js 文件的內(nèi)容。
import $ from 'jquery';
?
$.fn.changeStyle = function(colorStr){
? this.css("color", colorStr);
}效果出來了，這樣是可以的。
但是有一個問題啊，上面的 jquery 插件是我們自己隨意寫的，我們想怎么改都可以，如果是第三方的呢，就是說你有可能從網(wǎng)上下載一個別人寫好的。
這個時候，你總不能下載后，再來改吧。
我們怎么做呢？
解決辦法
這個時候要引入 webpack 的一個插件：ProvidePlugin。
這個插件可以有這樣的效果。
不必通過 import/require 使用模塊
把剛才的 src/jquery.changeStyle.js 還原一下。
src/jquery.changeStyle.js
接下來：在webpack.config.js
module.exports = {
? plugins: [
? ? new webpack.ProvidePlugin({
? ? ? $: 'jquery',
? ? ? jQuery: 'jquery'
? ? }),
? ? ...
? ]
}什么意思呢？很容易理解，以后要遇到或處理 jQuery 或 $ 都會去自動加載 jquery 這個庫。
現(xiàn)在我們運行一下 npm run dev，效果出來了。
這個插件不止可以處理 jquery，還可以處理別的庫，等你慢慢用它吧。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了Vue出現(xiàn)彈出層時禁止底部頁面跟隨滑動，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡便方法
走馬燈功能在展示圖片時經(jīng)常用到,下面這篇文章主要給大家介紹了關(guān)于element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡便方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
這篇文章主要給大家介紹了關(guān)于vue使用Echarts繪制地圖的相關(guān)資料,Apache ECharts一個基于JavaScript的開源可視化圖表庫,提供了常規(guī)的折線圖、柱狀圖、散點圖、餅圖、K線圖,用于統(tǒng)計的盒形圖,需要的朋友可以參考下2023-09-09
element-ui中el-upload多文件一次性上傳的實現(xiàn)
這篇文章主要介紹了element-ui中el-upload多文件一次性上傳的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
Vue + Echarts頁面內(nèi)存占用高的問題解決方案
點擊左側(cè)的菜單可以切換不同的看板,有些看板頁面中的報表比較多,用戶多次切換后頁面的內(nèi)存占用可以上升為GB級,嚴(yán)重時導(dǎo)致頁面內(nèi)存溢出,使得頁面崩潰,極大影響了用戶體驗,本文給大家介紹Vue + Echarts頁面內(nèi)存占用高的問題解決方案,感興趣的朋友一起看看吧2024-02-02
基于element-ui對話框el-dialog初始化的校驗問題解決
這篇文章主要介紹了基于element-ui對話框el-dialog初始化的校驗問題解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
無論是開發(fā)新手還是經(jīng)驗豐富的老手，我們都喜歡開源軟件包。本文主要介紹了35個最好用的Vue開源庫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
這篇文章主要介紹了vue中可以綁定多個事件嗎，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
最近因為公司項目問題,開始學(xué)習(xí)vue,這篇文章主要給大家介紹了關(guān)于如何運行vue項目的相關(guān)資料,文中還介紹了如何運行別人的項目,需要的朋友可以參考下2022-06-06
組件是有name屬性的,匹配的就是組件的name,下面這篇文章主要給大家介紹了關(guān)于vue中組件的name屬性含義和用法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12