Vue脚手架报错： Component name “xxx“ should always be multi-word（vue/multi-word-component-names）的解决办法

已于 2022-10-08 21:25:52 修改
阅读量1.9k 收藏 7
点赞数 3
分类专栏： 报错专栏 文章标签： 前端 javascript vue
于 2022-08-21 22:45:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vest_er/article/details/126456572
版权
报错图片

报错截图

报错原因

根据报错信息大概翻译：组件名"School"应该使用多个单词拼接横线组成

之所以报错，是因为语法检查的时候把命名不规范当成了错误。

虽然官方文档建议我们使用大驼峰或者是使用短横线"-"衔接的方式，但其实也可以使用单个单词的

解决方法
1、修改组件名

将School.vue修改为SchoolName.vue

2、关闭驼峰命名规则

找到package.json文件，在"rules": 中添加如下代码：

/*关闭驼峰命名规则*/
"vue/multi-word-component-names": 0

代码示意图
在这里插入图片描述

3、关闭语法检测提示

找到vue.config.js文件,在里面添加如下代码

  lintOnSave:false /*关闭语法检查*/

代码示意图
添加代码

离奇6厘米
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-flatpickr-component：Flatpickr日期时间选择器的Vue.js组件
02-06
Vue FlatPickr组件 Vue.js组件，用于日期时间选择器。或版本矩阵Vue.js版本套餐版本科2.x 8.x ...true ，组件将负责所有操作与验证库一起使用安装# yarnyarn add vue-flatpickr-component# npmnpm install vue-flatpick
vue-multi-page:使用@ vuecli＃3.x配置多页项目环境
05-02
首先 使用vue脚手架开发多页应用是比较特别的需求，无奈有需求就要有解决的方案办法，之前写过用vue-cli2.x改造生产多页应用的方法，现在想想应该升级换代了。 本想自己配置一个多页的开发配置给大家参考使用，看完...
vue脚手架报错：Component name “xxx“ should always be multi-word vue/multi-word-component-names
weixin_51664510的博客
05-11 166
针对非驼峰命名出现的问题。
Vue脚手架报错： Component name “xxx“ should always be multi-word vue/multi-word-component-names
weixin_54967112的博客
08-16 700
给组件命名时没有使用驼峰命名法或横线拼接单词，编译的时候一直报错，实际上是语法检测的问题，语法检查时将不规范的代码当成了错误。不同人或公司的语法标准不同，所以会常报错。方法一：更改组件名,使其符合命名规范如：驼峰命名法(CamelCase命名) 或 横线拼接单词(kebab-case命名)。在 vue.config.js 文件中加上一行 lintOnSave: false...注意：语法检查时要求组件名不能是单个单词，因此单个单词如 School 也会报错。方法二：关闭语法检测（通常）。...
vue/multi-word-component-names错误
m0_60913945的博客
03-13 142
Vue报错【已解决】【Component name “xxx“ should always be multi-word vue/multi-word-component-names】
STATICHIT静砸的博客
11-03 4315
Vue脚手架报错： Component name "xxx" should always be multi-word vue/multi-word-component-names - 哪家磨刀 - 博客园 (cnblogs.com)方法一：更改组件名,使其符合命名规范如：驼峰命名法 或 横线拼接单词。给组件命名时没有使用驼峰命名法或横线拼接单词，实际上是。lintOnSave: false　　//关闭语法检查。的问题，语法检查时将不规范的代码当成了错误。方法二：关闭语法检测（通常）。
Component name “xxx“ should always be multi-word vue/multi-word-component-names 解决方法
lqins的博客
05-01 4753
vue3 脚手架生成后报错 should always be multi-word vue/multi-word-component-names should always be multi-word vue/multi-word-component-names ctrl+p打开vue.config.js 加上 lintOnSave:false//关闭语法检查 记得重新编译跑一遍 npm run serve ...
解决vue3生成脚手架出现Component name “xxx“ should always be multi-word vue/multi-word-component-names
m0_58122175的博客
07-27 1309
解决vue3生成脚手架出现Component name “xxx“ should always be multi-word vue/multi-word-component-names
在创建vue组件中出现Component name “xxx“ should always be multi-word.eslintvue/multi-word-component-names
junglegle_的博客
04-20 3707
​ Component name "xxx" should always be multi-word.eslintvue/multi-word-component-names ​
异常 error Component name “XXX“ should always be multi-word vue/multi-word-component-names
qq_53282665的博客
04-09 1166
学习vue脚手架时报了个:error Component name "Teacher" should always be multi-word vue/multi-word-component-names 貌似是我命名不太规范 解决办法:修改配置项,关闭语法检查 在vue.config.js加上lintOnSave:false
vue脚手架报错
weixin_47417033的博客
04-25 527
vue脚手架配置出现的问题及解决方法 error Component name “about“ should always be multi-word Component name “xxx“ should always be multi-word vue/multi-word-component-names eslint解决、vue的第一行报错： 在eslintrc.js中把extends中的vue/standard删掉。 在rules中添加一行：'vue/multi-word-component-nam
Vue2学习第三天
qq_46435701的博客
03-29 139
第一次使用脚手架报错：Component name “School” should always be multi-word vue/multi-word-component-names 、 解决方法：修改配置项,关闭语法检查 在vue.config.js文件里加上如下代码 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ lintOnSave:false }) ...
vue-router 按需加载 component: () = import() 报错的解决
01-18
vue的单页面（SPA）项目,...但现在vue-router的官网看看，推荐这种方式： //vue异步组件和webpack的【代码分块点】功能结合，实现了按需加载 const App = () => import(‘../component/Login.vue’); 可是，很多情
vue-router 按需加载 component: () => import() 报错的解决
10-14
主要介绍了vue-router 按需加载 component: () => import() 报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-slider-component：:thermometer:高度定制的滑块组件
02-06
$ yarn add vue-slider-component@next # npm install vue-slider-component@next --save 警告 更改data以v-data现在由于类型的冲突。 （可能是临时修改） :sparkles: 产品特点 :meat_on_bone: 更可定制 :dress: ...
记录一次前端页面崩溃的产生及处理
weixin_51123079的博客
05-30 604
记录一次前端页面崩溃的产生及处理
前端开发记录
qq_25806839的博客
05-31 230
【代码】前端开发记录。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 681
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
从CSV到数据库(简易)
最新发布
qq_31856061的博客
05-31 351
需求：客户上传CSV文档，要求CSV文档内容查重/插入/更新相关数据。框架：jdbcTemplate、commons-io、DB：oracle相关依赖：这里本来打算用的2.11.0，无奈正式项目那边用老版本1.3.1，新版本对类型支持和转换好一点。不过无伤大雅。
Eslint检验项目报错 Component name xxx should always be multi-word vue/multi-word-component-names解决参考
09-21
Eslint报错"Component name xxx should always be multi-word vue/multi-word-component-names"表示组件名应该始终是多单词，不应该以单个单词命名组件。解决方法可以有两种： 解决方法1：修改组件名为多单词形式，例如将"Login.vue"修改为"LoginName.vue"。组件名需要以驼峰式命名，至少包含两个单词。可以根据具体情况自行选择组件名，只需保证至少包含两个单词即可。 解决方法2：禁用eslint的多单词命名规则。在vue.config.js配置文件中添加规则"lintOnSave:false"，示例如下： ```javascript const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false }) ``` 另外，可以在.eslintrc.js文件中对指定的文件进行覆盖配置，禁用多单词命名规则。示例如下： ```javascript module.exports = { // ... overrides: [ { files: ['src/views/**/*.vue'], rules: { 'vue/multi-word-component-names': 0, }, }, ] } ``` 这样就可以解决Eslint检验项目报错"Component name xxx should always be multi-word vue/multi-word-component-names"的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值