vue组件（文件）命名重名或命名大小写方面的疑惑

Question

问题描述

我的项目在升级了一个ui组件库后，run dev出现以下警告：

There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.

我的理解是组件名冲突（重复）了，也有人说是组件名大小写问题。

问题主要疑惑

当我退回ui组件版本，警告就会消失。
然后尝试升级了5个不同版本，发现只要升级都会出现上方的警告。

问题需要解决的几个关键点

1. 不同文件夹下有同名组件但不会在任何一个vue文件中引用同名组件，这样的做法究竟对不对？

   • 问题已知条件1： 未升级ui组件前项目不存在这个警告的，回退ui组件版本警告也会消失
   • 问题已知条件2： 看警告的描述，确实像是不同文件夹下存在的vue文件有同名

Answer 1

找到问题了，更新后的ui组件库在导入vue时路径用了大写。
所以果然如网上说的，是大小写问题！

Answer 2

vue组件命名规范
单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。

坏的例子

components/
|- mycomponent.vue


components/
|- myComponent.vue
   

---

好的例子

components/
|- MyComponent.vue


components/
|- my-component.vue

---

详情请看vue官网
vue风格指南