vue脚手架报错:“Component name “***“ should always be multi-word”解决方法

出现的问题

在我们写完脚手架运行 npm run serve 后控制台报错

 页面报错

 报错的原因

 在为自定义组件命名的时候未按照官方代码规范进行命名,根据 ESLint 官方代码风格指南,除了根组件(App.vue)以外,其他自定义组件命名都要使用大驼峰命名方式或者用“-”连接单词进行命名;

这里的报错不影响页面的编译,只是告诉你命名规范不对,当我们关闭提示发现,写的代码依旧有效

但是控制台一直报错很影响程序员,所以我们也可以选择一些方法避开报错

解决方法

1.重新对组件进行命名

根据报错原因可以知道,是因为我们的组件名称(Count)不规范,那么我们可以规范把我们的组件名,即把(Count)组件名改为大驼峰命名方式或者用“-”连接单词进行命名

这里我们改为了(MyCount)

重新npm run serve后发现,控制台不再报错了

2.关闭语法检查

 第二种方法是重源头解决了,因为如命名规范错误大概率不会影响我们练习时的代码,所以可以选择关闭语法检查来解决。

步骤

创建脚手架后找到vue.config.js文件

 在里面加入这行代码:lintOnSave:false  //关闭语法检查

重新运行npm run serve,发现还是(Count)组件,但不再报错了。

 ps:如果没有vue.config.js文件可以自己创建一个

 写文章的经验较少,讲的不清楚欢迎大家评论区提问

  • 12
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
根据引用,[2]和的内容,报错信息"Component name "Student" should always be multi-word vue/multi-word-component-name"的意思是组件名"Student"应该总是使用多个单词拼接横线组成的。 Vue 编译器要求组件名使用多个单词,并使用横线进行连接,以提高代码的可读性和可维护性。因此,你需要将组件名从"Student"改为使用多个单词并以横线连接的形式来命名。例如,你可以将组件名改为"student-info"或者其他类似的形式。这样做可以避免编译报错并符合Vue的命名规范。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [error Component name “xxx“ should always be multi-word vue/multi-word-comp](https://blog.csdn.net/u011127019/article/details/123213103)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [Vue脚手架报错 Component name “Student“ should always be multi-word vue/multi-word-component-names](https://blog.csdn.net/qq_51612558/article/details/124329234)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值