這篇文章主要介紹了vue.js和jquery有沒有沖突的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue.js和jquery有沒有沖突文章都會有所收獲，下面我們一起來看看吧。

創新互聯公司于2013年創立，是專業互聯網技術服務公司，擁有項目網站制作、成都網站設計網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元定州做網站,已為上家服務,為定州各地企業和個人服務,聯系電話:18982081108

JQuery和VueJS合理使用并不會造成沖突，因為它們的側重點不同，VueJS側重數據綁定和視圖組件，而JQuery側重異步請求和動畫效果。vue項目中使用jquery的方法：1、利用npm工具安裝jquery；2、配置“webpack.base.conf.js”文件；3、避開eslint檢查；4、重新啟動項目，使用jquery即可。

本教程操作環境：windows7系統、vue3&&jquery3.6.1版，DELL G3電腦。

JQuery和VueJS合理使用并不會造成沖突，因為它們的側重點不同，VueJS側重數據綁定和視圖組件，而JQuery側重異步請求和動畫效果。

且有時候只要想到要用的 vue.js 的時候就會慣性的想起用vue-cli手腳架搭建一個項目，但是有時候的業務場景并不適合用vue-cli手腳架，這個時候使用vue+jquery混合使用，把他們的優點結合起來使用會大大提升開發效率。

vue項目使用jquery的方法

1、安裝jquery

進入項目根目錄下運行：npm install jquery --save

項目的package.json會自動添加依賴信息

2、兩種使用方式

2.1 組件中直接使用

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

import $ from 'jquery'

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

<template>
  <div id="app">
   
  </div>
</template>
<script>
  import $ from 'jquery'
  export default {
    name: 'App',
    components: {},
    data: function () {
      return {}
    },
    created:function(){
      console.log($('#app'));
    }
  }
</script>
<style>
</style>

2.2 使用全局變量

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

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

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

在項目中找到webpack.base.conf.js文件，在開頭使用以下代碼引入webpack，因為該文件默認沒有引用。

let webpack = require('webpack')

截圖，如下所示

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

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

截圖中，省略了部分代碼

3）避開eslint 檢查

修改根目錄下.eslintrc.js 文件的env 節點，為env添加一個鍵值對 jquery: true 就可以了

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

截圖如下

4）重新啟動項目 npm run dev，可直接使用$

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

console.log($('選擇器')) ，你會發現成功使用jQuery獲取到了DOM

或者按下面的，能看到jq是一個函數

關于“vue.js和jquery有沒有沖突”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue.js和jquery有沒有沖突”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道。

本文名稱：vue.js和jquery有沒有沖突
本文地址：http://vcdvsql.cn/article8/gjdeip.html

成都網站建設公司_創新互聯，為您提供網站改版、面包屑導航、服務器托管、、建站公司、用戶體驗

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯