Vue CLI設定引用jQuery

首先是專案必須要安裝jquery， 可以使用以下任一方式將jquery加到專案下

npm install jquery

或者在package.json加上jquery的引用

  "dependencies": {
    ...
    "jquery": "^3.6.0"
  },

然後再呼叫

npm update

之後你就可以在會用到jquery的*.vue裡面直接import

import jquery from 'jquery'

然後你就會有個 jquery 物件可以使用(請注意大小寫)，但這個方法的缺點就是後面執行build時，jquery也會被包進編譯完的函式庫，導致函式大小會到幾百k，但好處是不需依賴外部的jquery。

全域引用

在src/main.js定義

import jquery from 'jquery'

window.$ = window.jQuery = jquery;

然後就可以在*.vue裡直接呼叫 $或是jQuery，而且不用刻意import。

<script>
export default {
    name: 'MyComponent',
    method: {
        apiCall: function(url,data,method){
            return $.ajax({
                url,
                data,
                method
            });
        },
    },
}
</script>

如果只做到這裡的，在你有用到jquery的*.vue裡會輸出jQuery未定義的錯誤，這時你可以在該*.vue裡的script最上方加上下列敘述。

/* eslint-disable */

這樣就會抑制錯誤訊息，而且程式也可以正常執行。

如果再接著在 package.json裡設定

  "eslintConfig": {
    "env": {
      ...
      "jquery": true
    },

這樣就可以不用填入 /* eslint-disable */。

但如果在設定之前就已經執行預覽，請先關掉預覽後再重新啟動。

這樣後續 build 時就不會把jQuery也包進結果，但會依賴外部jQuery，所以使用函式庫時，請記得再引用jQuery，就像引用Vue那樣。