vue eslint 報錯 error “Component name “*****“ should always be multi-word”,該怎麼辦?

出現的問題:

 在 vue-cli 創建的項目中,創建文件並命名後,會報  “Component name "*****" should always be multi-word”  報錯;

報錯截圖示例如下:

Component name "******" should always be multi-word.eslintvue/multi-word-component-names

報錯的原因:

 在組件命名的時候未按照 ESLint 的官方代碼規範進行命名,根據 ESLint 官方代碼風格指南,除了根組件(App.vue)以外,其他自定義組件命名要使用大駝峯命名方式或者用“-”連接單詞進行命名;

解決方案: 

方案一 :重命名(親測有效)

 文件的名稱重命名
 重新命名組件名爲駝峯命名方式或者用“-”連接單詞的格式

這樣問題就解決啦~~~~

示例如下:

方案二 :配置 vue.config.js 文件(網上方法,本人使用無效)

在根目錄下找到 vue.config.js 文件(如果沒有則新建一個,按照示例中的代碼進行添加;用 vue-cli 腳手架進行創建的項目都會有 vue.config.js 文件),添加下面的代碼在 vue.config.js 文件下,加入以下代碼


// 關閉eslint校驗
lintOnSave: false 

示例如下: 

此方案只是編譯時不報錯,如果使用 VScode+eslint 會在文件頭標紅提示,並且官方並不建議直接關閉校驗,因此在這裏並不推薦使用該方法進行解決;

配置 vue.config.js 文件的方法(方案二)一般都不能解決問題,不建議大家使用

如果你發現並沒有解決問題,那麼不妨試試其他方案

方案三 :配置 .eslintrc.js文件(親測有效)

1、關閉命名規則

找到 .eslintrc.js 文件在 rules 裏面加上這麼一句

// 關閉名稱校驗
'vue/multi-word-component-names': "off" 
 建議使用這種方法,更加正確合理;

示例如下:

發現不報錯了,可以正常運行啦~~~

 以上是關閉命名規則,將不會校驗組件名,官方建議設置是根據組件名進行忽略

2、忽略個別組件名

// 添加組件命名忽略規則
 
    "vue/multi-word-component-names": ["error",{
       "ignores": ["Home","User"]  //在這個數組中加入需要忽略的組件名
    }]
推薦使用方案三,極力推薦!!!

 示例如下:

非常重要的注意點:(重啓項目,配置文件才生效)

在運行的項目中,修改配置文件,必須先將項目在  終端  兩次點擊 Ctrl+C  將項目 終止運行,再 npm run serve 重新運行項目,修改的配置文件纔可以生效

這樣,就解決這個報錯啦~~~❤❤❤

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章