這篇文章主要介紹了vue.js和jquery有沒(méi)有沖突的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue.js和jquery有沒(méi)有沖突文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

創(chuàng)新互聯(lián)公司于2013年創(chuàng)立，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元定州做網(wǎng)站,已為上家服務(wù),為定州各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

JQuery和VueJS合理使用并不會(huì)造成沖突，因?yàn)樗鼈兊膫?cè)重點(diǎn)不同，VueJS側(cè)重?cái)?shù)據(jù)綁定和視圖組件，而JQuery側(cè)重異步請(qǐng)求和動(dòng)畫(huà)效果。vue項(xiàng)目中使用jquery的方法：1、利用npm工具安裝jquery；2、配置“webpack.base.conf.js”文件；3、避開(kāi)eslint檢查；4、重新啟動(dòng)項(xiàng)目，使用jquery即可。

本教程操作環(huán)境：windows7系統(tǒng)、vue3&&jquery3.6.1版，DELL G3電腦。

JQuery和VueJS合理使用并不會(huì)造成沖突，因?yàn)樗鼈兊膫?cè)重點(diǎn)不同，VueJS側(cè)重?cái)?shù)據(jù)綁定和視圖組件，而JQuery側(cè)重異步請(qǐng)求和動(dòng)畫(huà)效果。

且有時(shí)候只要想到要用的 vue.js 的時(shí)候就會(huì)慣性的想起用vue-cli手腳架搭建一個(gè)項(xiàng)目，但是有時(shí)候的業(yè)務(wù)場(chǎng)景并不適合用vue-cli手腳架，這個(gè)時(shí)候使用vue+jquery混合使用，把他們的優(yōu)點(diǎn)結(jié)合起來(lái)使用會(huì)大大提升開(kāi)發(fā)效率。

vue項(xiàng)目使用jquery的方法

1、安裝jquery

進(jìn)入項(xiàng)目根目錄下運(yùn)行：npm install jquery --save

項(xiàng)目的package.json會(huì)自動(dòng)添加依賴信息

2、兩種使用方式

2.1 組件中直接使用

我們想在哪個(gè)組件中使用jQuery庫(kù)，首先要使用如下命令引入jquery，然后就可以正常使用了

import $ from 'jquery'

比如，我們要在 App.vue組件中使用jQuery，實(shí)例代碼如下：

2.2 使用全局變量

若每一個(gè)組件中都可以使用jquery，必須在每個(gè)組件中寫(xiě)：import $ from 'jquery';

比較麻煩，所以使用全局變量

1）webpack.base.conf.js文件中引入

在項(xiàng)目中找到webpack.base.conf.js文件，在開(kāi)頭使用以下代碼引入webpack，因?yàn)樵撐募J(rèn)沒(méi)有引用。

let webpack = require('webpack')

截圖，如下所示

2）在同文件：webpack.base.conf.js中，找到module.exports中添加一段代碼

// 添加代碼
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery"
})
],

截圖中，省略了部分代碼

3）避開(kāi)eslint 檢查

修改根目錄下.eslintrc.js 文件的env 節(jié)點(diǎn)，為env添加一個(gè)鍵值對(duì) jquery: true 就可以了

env: {
// 原有
browser: true,
// 添加
jquery: true
}

截圖如下

4）重新啟動(dòng)項(xiàng)目 npm run dev，可直接使用$

不需要再import 引用 jQuery 了，可以 直接使用$了

console.log($('選擇器')) ，你會(huì)發(fā)現(xiàn)成功使用jQuery獲取到了DOM

或者按下面的，能看到j(luò)q是一個(gè)函數(shù)

關(guān)于“vue.js和jquery有沒(méi)有沖突”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“vue.js和jquery有沒(méi)有沖突”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。