出現(xiàn)的問題：

 在 vue-cli 創(chuàng)建的項(xiàng)目中，創(chuàng)建文件并命名后，會(huì)報(bào)  “Component name "*****" should always be multi-word”  報(bào)錯(cuò)；

報(bào)錯(cuò)截圖示例如下：

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

報(bào)錯(cuò)的原因：

 在組件命名的時(shí)候未按照 ESLint 的官方代碼規(guī)范進(jìn)行命名，根據(jù) ESLint 官方代碼風(fēng)格指南，除了根組件（App.vue）以外，其他自定義組件命名要使用大駝峰命名方式或者用“-”連接單詞進(jìn)行命名；

解決方案： 

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

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

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

示例如下：

方案二 ：配置 vue.config.js 文件（網(wǎng)上方法，本人使用無效）

在根目錄下找到 vue.config.js 文件（如果沒有則新建一個(gè)，按照示例中的代碼進(jìn)行添加；用 vue-cli 腳手架進(jìn)行創(chuàng)建的項(xiàng)目都會(huì)有 vue.config.js 文件），添加下面的代碼在 vue.config.js 文件下，加入以下代碼

// 關(guān)閉eslint校驗(yàn)
lintOnSave: false 

示例如下： 

此方案只是編譯時(shí)不報(bào)錯(cuò)，如果使用 VScode+eslint 會(huì)在文件頭標(biāo)紅提示，并且官方并不建議直接關(guān)閉校驗(yàn),因此在這里并不推薦使用該方法進(jìn)行解決；

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

如果你發(fā)現(xiàn)并沒有解決問題，那么不妨試試其他方案

方案三 ：配置 .eslintrc.js文件（親測有效）

1、關(guān)閉命名規(guī)則

找到 .eslintrc.js 文件在 rules 里面加上這么一句

// 關(guān)閉名稱校驗(yàn)
'vue/multi-word-component-names': "off" 

 建議使用這種方法，更加正確合理；

示例如下：

?發(fā)現(xiàn)不報(bào)錯(cuò)了，可以正常運(yùn)行啦~~~ 

? 以上是關(guān)閉命名規(guī)則，將不會(huì)校驗(yàn)組件名，官方建議設(shè)置是根據(jù)組件名進(jìn)行忽略

2、忽略個(gè)別組件名

    // 添加組件命名忽略規(guī)則
 
    "vue/multi-word-component-names": ["error",{
       "ignores": ["Home","User"]  //在這個(gè)數(shù)組中加入需要忽略的組件名
    }]

推薦使用方案三，極力推薦！??！

 示例如下：

非常重要的注意點(diǎn)：（重啟項(xiàng)目，配置文件才生效）

在運(yùn)行的項(xiàng)目中，修改配置文件，必須先將項(xiàng)目在  終端  兩次點(diǎn)擊 Ctrl+C  將項(xiàng)目 終止運(yùn)行，再 npm run serve 重新運(yùn)行項(xiàng)目，修改的配置文件才可以生效

這樣，就解決這個(gè)報(bào)錯(cuò)啦~~~

總結(jié)

到此這篇關(guān)于vue eslint報(bào)錯(cuò)error "Component name "*****" should always be multi-word"解決的文章就介紹到這了,更多相關(guān)vue eslint報(bào)錯(cuò)error Component name內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論