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)文章
這篇文章主要介紹了vuex實現(xiàn)歷史記錄的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue.js通過自定義指令實現(xiàn)數(shù)據(jù)拉取更新的實現(xiàn)方法
數(shù)據(jù)拉取更新這個功能相信大家基本都見過，但是如果要做起來卻不止如何做起，所以這篇文章給大家分享了vue.js通過自定義指令實現(xiàn)的方法，閱讀本文需要對vue有一定理解，有需要的朋友們下面來一起看看吧。2016-10-10
這篇文章主要介紹了Vue使用el-dialog關(guān)閉后重置表單方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
vue項目總結(jié)之文件夾結(jié)構(gòu)配置詳解
這篇文章主要給大家總結(jié)介紹了關(guān)于vue項目之文件夾結(jié)構(gòu)配置的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
解決element-ui的el-dialog組件中調(diào)用ref無效的問題
這篇文章主要介紹了解決element-ui的el-dialog組件中調(diào)用ref無效的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
Vue配合iView實現(xiàn)省市二級聯(lián)動的示例代碼
本篇文章主要介紹了Vue配合iView實現(xiàn)省市二級聯(lián)動的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)驗證用戶名是否可用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
vue+VeeValidate 校驗范圍實例詳解（部分校驗,全部校驗）
validate（)可以指定校驗范圍內(nèi)，或者是全局的 字段。而validateAll()只能校驗全局。這篇文章主要介紹了vue+VeeValidate 校驗范圍（部分校驗，全部校驗） ,需要的朋友可以參考下2018-10-10
vue項目打包部署到nginx后css樣式失效的問題及解決方法
我將自己的前端Vue項目,經(jīng)過build生成的dist文件夾copy到nginx的html文件夾中,然后寫了配置文件,運行訪問后發(fā)現(xiàn)頁面css樣式?jīng)]有加載到,下面給大家介紹vue項目打包部署到nginx后css樣式失效的問題及解決方法,感興趣的朋友一起看看吧2024-12-12
這篇文章主要給大家介紹了關(guān)于如何在Vue中配置代理服務(wù)器的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-12-12