vue组件终端报错： error Component name “xxx“ should always be multi-word vue/multi-word-component-names

桃扇骨 2023-09-23 13:52 100阅读 0赞

## 前言 ##

今天使用vscode开发vue引入组件的时候遇到一个错误，我的组件名称以及路径都是没问题的，但是就是运行不起来

错误信息截图如下  
![在这里插入图片描述][5bcf5d10af47426caa77c8e53a6bcf3b.png]

![在这里插入图片描述][853228d1a46e485fa79abe6ed95ab74d.png]

## 分析问题 ##

根据提示信息可知是组件名出了问题，概就是组件名应该使多个单词拼接横线组成的。

但是我又查阅了官方的风格指南，发现组件名可以这样命名，一个单词单身首字母大写也是没问题的

查阅资料发现，这其实是语法检查的时候把不规范的代码(即命名不规范)当成了错误。

## 解决问题 ##

针对这种问题，我个人推荐：修改配置项，关闭语法检查

### 1 打开并且编译vue.config.js ###

项目的根目录找到vue.config.js文件  
![在这里插入图片描述][0d3e9f49d8ea4e6b9abd3acf4f5fa48d.png]

### 2 添加配置 ###

添加配置： lintOnSave:false,，作用是关闭语法检查  
![在这里插入图片描述][3947e3a99bfa4e92a2824c188f4f964e.png]

const {
         defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
        
      transpileDependencies: true,
      lintOnSave:false, //  关闭语法检查 
    })

### 3 保存重启 ###

保存文件，重新执行npm run serve即可

![在这里插入图片描述][2a7d4e2b16124176838d4ce41e8a1e02.png]  
解决  
![在这里插入图片描述][dd1b6226de264df6aa9ab8d3fcb41a1f.png]

[5bcf5d10af47426caa77c8e53a6bcf3b.png]: https://img-blog.csdnimg.cn/5bcf5d10af47426caa77c8e53a6bcf3b.png
[853228d1a46e485fa79abe6ed95ab74d.png]: https://img-blog.csdnimg.cn/853228d1a46e485fa79abe6ed95ab74d.png
[0d3e9f49d8ea4e6b9abd3acf4f5fa48d.png]: https://img-blog.csdnimg.cn/0d3e9f49d8ea4e6b9abd3acf4f5fa48d.png
[3947e3a99bfa4e92a2824c188f4f964e.png]: https://img-blog.csdnimg.cn/3947e3a99bfa4e92a2824c188f4f964e.png
[2a7d4e2b16124176838d4ce41e8a1e02.png]: https://img-blog.csdnimg.cn/2a7d4e2b16124176838d4ce41e8a1e02.png
[dd1b6226de264df6aa9ab8d3fcb41a1f.png]: https://img-blog.csdnimg.cn/dd1b6226de264df6aa9ab8d3fcb41a1f.png