九、VueJs 填坑日記之在項目中使用jQuery

很多人學習 js 都是從 jQuery 開始的，我也不例外。有時候進行一些操作的時候，還是感覺 jQuery 比較好用，那么，我們如何在項目中使用 jQuery 呢？這篇博文帶你實踐。

 

引用 jQuery 文件
首先呢，jQuery 是提供了 npm 的安裝包的。我們的 vue-cli 腳手架，也是支持引入的。不過設置比較麻煩，如果你對使用這種方法比較敢興趣，可以直接參考下面的內容：
https://maketips.net/tip/223/how-to-include-jquery-into-vuejs
好，我們不說這種方式引入 jQuery 而是引用文件的方式引用。

首先，我們下載 jQuery 文件到我們的 /static/js/ 目錄。正好我本地有一個 jquery-1.8.3.min.js，我就放了這么一個 jQuery 文件到我們的演示項目里。

然后，在 /src/main.js 合適位置插入下面的代碼：

// import 'jquery'
import '../static/js/jquery-1.8.2.min.js'

 

 

測試 jQuery
新建 /src/pages/jq.vue 文件，錄入下面的內容並將路由配置為 /jq，如不會請看以前的博文：

<template>
  <div class="love">
    <p>這里是初始文字</p>
    <button @click="testJQ">看看 jquery 有沒有工作</button>
  </div>
</template>
<script>
export default {
  methods: {
    testJQ () {
      $('.love p').html('jquery 工作正常！')
    }
  }
}
</script>

 

好，如果你的編輯器配置了代碼審查的話，應該報錯了。而瀏覽器里面，也是報錯的。我這里的項目是沒有配置代碼審查的，所以直接能用。如果不小心配置了，那也不必着急請往下看。

 

去掉 eslint 報錯 ‘$’ is not defined
雖然引用了 jQuery 但是你真正去寫的時候，會報這個錯誤。我們首先需要關閉掉這個錯誤。關閉有兩種方法，一種是臨時關閉，一種是永久關閉。我這里提供永久關閉的方法。我們編輯 /.eslintrc.js 文件：

env: {
    browser: true,
    jquery: true
  },

 

在 env 區間里面加上 jquery: true 參數即可。然后我們重新跑一下系統 npm run dev 就應該可以看到我們想要的效果了。

更加復雜的操作，我沒有嘗試。但是我可以肯定，絕對沒有原生寫那樣順暢。還必須依賴 vue 的一些方法什么的。我的建議是，一般不使用 jQuery，如果使用的話，請確保在可控的范圍內。否則，你算是給項目埋大坑了。

在這里忠心感謝FungLeo，是你們無私的奉獻，才讓我們有了學習的參考，以下是地址：
http://blog.csdn.net/FungLeo/article/details/77879328