vue中使用jquery報錯 $ is not defined

1、問題  $ is not defined

在使用Vs Code編寫Vue應用的時候，從頁面中引入jquery後，在.vue文件編寫使用時，ESLint編譯報錯，程序運行正常。

錯入內容以下：

error: Unexpected console statement (no-console) at src\components\HelloWorld.vue:16:7:
  14 |   methods: {
  15 |     getOne: function() {
> 16 |       console.info("click");
     |       ^
  17 |       $.get("http://www.gongjuji.net", function(data) {
  18 |         console.info(data);
  19 |       });


error: '$' is not defined (no-undef) at src\components\HelloWorld.vue:17:7:
  15 |     getOne: function() {
  16 |       console.info("click");
> 17 |       $.get("http://www.gongjuji.net", function(data) {
     |       ^
  18 |         console.info(data);
  19 |       });
  20 |     }

2、錯誤緣由和解決方案

在VS Code編寫Vue代碼時使用ESLint編譯js源代碼，針對不一樣的環境代碼檢查方式不一樣。

方式1.修改ESLint的檢查環境，增長jquery便可。推薦

"eslintConfig": {
    "root": true,
    "env": {
      "browser":true,
      "node": true,
      "jquery": true
    },

 

"eslintConfig": {
    "root": true,
    "env": {
      "node": true,
      "jquery":true
    },

2.設ESLint規則，忽略指定錯誤，例如no-console

"eslintConfig": {
    "extends": "eslint:recommended",
    "env": {
      "node": true
    },
    "rules": {
      "no-console": "off"
    }
  }

 

 

更多：

 Vue開發異常： Error: custom keyword definition is invalid: data.errors should be boolean

基於Vue的手機端UI框架整理

Vue 引用全局樣式