报错代码

vue-cli全新创建项目   
    
    
，并建立组件时提示报错


     


     


     ，报错如下：

vscode标红提示： Component name "index" should always be multi-word.eslintvue/multi-word-component-names

npm run serve / yarn serve报错：

ERROR Failed to compile with 1 error 下午6:02:08 C:\Users\wally\Desktop\vscode\vue\seal\seal_web\src\views\home\index.vue 1:1 error Component name "index" should always be multi-word vue/multi-word-component-names ✖ 1 problem (1 error, 0 warnings) You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. ERROR in C:\Users\wally\Desktop\vscode\vue\seal\seal_web\src\views\home\index.vue 1:1 error Component name "index" should always be multi-word vue/multi-word-component-names ✖ 1 problem (1 error, 0 warnings) webpack compiled with 1 error

原因

新手在组件命名的时候不够规范 




 




 



，根据官方风格指南   

   

   

，除了根组件（App.vue）外

     

     

    ，自定义组件名称应该由多单词组成
  




  




  


，防止和html标签冲突    
    
    
。

而最新的vue-cli创建的项目使用了最新的vue/cli-plugin-eslint插件  


  


  


，在vue/cli-plugin-eslint v7.20.0版本之后就引用了vue/multi-word-component-names规则 
     
     
   ，所以在编译的时候判定此次错误    


     


     


。

解决方案

方案一

改名 修改组件名为多个单词

   




   




   

，使用大驼峰命名方式或者用“-    
    
    
”连接单词




 




 




 。但是有时候因为个别原因不能改名 



 



 



，此方案不好使              ，看下面两个方案   

   

   
。

方案二：

关闭校验 在根目录下找到vue.config.js文件（如果没有则新建一个）


    




    




    
，添加下面的代码

lintOnSave: false

添加后文件示例：

const { defineConfig } = require(@vue/cli-service) module.exports = defineConfig({ transpileDependencies: true, //关闭eslint校验 lintOnSave: false })

此方案治标不治本














，只是编译时不报错              ，如果使用vscode+eslint 会在文件头标红提示


     



     



     ，强迫症根本忍受不了














，并且官方并不建议直接关闭校验   
    
    
，所以推荐使用方案三

方案三（推荐）

关闭命名规则校验 在根目录下找到 .eslintrc.js 文件


     


     


     ，同样如果没有则新建一个（注意文件前有个点） 




 




 



，代码如下

添加一行:

"vue/multi-word-component-names":"off",

文件内容：

module.exports = { root: true, env: { node: true }, extends: [ plugin:vue/essential, eslint:recommended ], parserOptions: { parser: @babel/eslint-parser }, rules: { no-console: process.env.NODE_ENV === production ? warn : off, no-debugger: process.env.NODE_ENV === production ? warn : off, //在rules中添加自定义规则 //关闭组件命名规则 "vue/multi-word-component-names":"off", }, overrides: [ { files: [ **/__tests__/*.{j,t}s?(x), **/tests/unit/**/*.spec.{j,t}s?(x) ], env: { jest: true } } ] }

以上是关闭命名规则   

   

   

，将不会校验组件名

     

     

    ，官方建议设置是根据组件名进行忽略

忽略个别组件名 // 添加组件命名忽略规则 "vue/multi-word-component-names": ["error",{ "ignores": ["index"]//需要忽略的组件名 }]

方案四(推荐):

方案三是关闭和忽略组件名规则
  




  




  


，但是有时候还是需要团队有个共同规范  


  


  


，不能关闭 
     
     
   ，同时文件名可能和组件名不一致时

   




   




   

，例如我需要每个页面入口为index.vue,但是组件名为MyHome,用忽略组件名的方式可能需要同时添加index和MyHome,就显得很傻瓜     

     

     

。或者我需要路由组件忽略 



 



 



，非路由组件不忽略              ，那如何在这种情况下修改规则更好用呢？因此我找到了第四种方式




  




  




 。方案三是根据组件名忽略


    




    




    
，此方案是根据文件进行关闭规则














，更适用
  


  


  
。

关闭某文件命名规则校验 在根目录下找到 .eslintrc.js 文件              ，同样如果没有则新建一个（注意文件前有个点）


     



     



     ，代码如下

在文件的overrides中添加如下代码：

{ files: [src/views/index.vue,src/views/**/index.vue], // 匹配views和二级目录中的index.vue rules: { vue/multi-word-component-names:"off", } //给上面匹配的文件指定规则 }

其中的 files: [] 是用于匹配文件的














，*号代表所有文件     
     
     
。index.vue也可以改成 *.vue   
    
    
，这就是匹配目录下的所有vue文件

文件内容：

module.exports = { root: true, env: { node: true }, extends: [ plugin:vue/essential, eslint:recommended ], parserOptions: { parser: @babel/eslint-parser }, rules: { no-console: process.env.NODE_ENV === production ? warn : off, no-debugger: process.env.NODE_ENV === production ? warn : off, }, overrides: [ //这里是添加的代码 { files: [src/views/index.vue,src/views/**/index.vue], // 匹配views和二级目录中的index.vue rules: { vue/multi-word-component-names:"off", } //给上面匹配的文件指定规则 }, { files: [ **/__tests__/*.{j,t}s?(x), **/tests/unit/**/*.spec.{j,t}s?(x) ], env: { jest: true } } ] }

其实和方案三基本一致


     


     


     ，只是放的位置不同