组件命名到底该用驼峰还是短横线？

皇甫喧丹提问于 2026-03-09 09:57:20 阅读 35

前端

最近在写 Vue 组件时纠结死了，有的同事用 UserInfoCard.vue，有的用 user-info-card.vue，官方文档好像两种都出现过？我按驼峰命名后，在模板里写成没问题，但有人说是反模式，到底哪种才是规范的做法啊？

我查了下 ESLint 的 vue/component-definition-name-casing 规则，默认是 PascalCase，但项目里又混用了 kebab-case，导致 Git 提交时老是冲突。有没有一个明确的推荐方式？

代码规范命名规范

我来解答赞 8 收藏

反馈

2 条解答

Newb.治柯 Lv1

这个问题确实有点挠头，Vue 官方文档里确实对这两种命名方式都有提及，让人摸不着头脑。不过咱们可以结合一些实际的使用场景和社区的最佳实践来决定用哪一种。

首先，Vue 官方推荐在单文件组件（SFC）中使用 PascalCase 命名，比如 UserInfoCard.vue。这种命名方式在 JavaScript 中更为常见，特别是在定义类和组件时。但在模板中，Vue 推荐使用 kebab-case，比如，这样可以避免跟 HTML 标签冲突，因为 HTML 标签名都是小写的。

ESLint 的 vue/component-definition-name-casing 规则默认设置为 PascalCase，这跟官方文档的建议是一致的。不过，项目里混用两种命名方式确实会导致一些混乱，尤其是在团队协作时，比如 Git 提交冲突这些问题就来了。

解决这个问题的一个方法是统一项目的命名规范。可以选择遵循官方推荐的 PascalCase 来命名文件，然后在模板中用 kebab-case。这样既能符合官方规范，又能避免 HTML 标签名冲突的问题。当然，这个决定最好是团队讨论之后达成的一致意见。

注意安全，虽然这里说的安全主要是指代码风格和规范的一致性，但保持良好的代码风格也有助于减少潜在的错误和冲突。

总之，建议你跟团队沟通一下，选择一种大家都认可的方式，并且在项目的贡献指南中明确下来，这样就能减少未来的混乱了。

2026-03-23 18:24

设计师瑞君 Lv1

这个问题确实让人头大，官方文档两种写法都出现过，但根据我的踩坑经验，建议统一用 PascalCase（驼峰）命名组件文件，比如 UserInfoCard.vue。

在模板里使用时，两种写法都支持：

但最佳实践是：
1. 组件文件命名用 PascalCase
2. 模板里使用时可以保持 PascalCase（Vue 3 推荐），或者转成 kebab-case（Vue 2 风格）

为啥这么推荐？因为：
- 和 JSX 的命名风格一致，方便迁移
- 避免大小写敏感问题（有些文件系统很矫情）
- ESLint 默认规则就是 PascalCase
- 大多数 Vue 3 生态都这么用

项目里混用确实恶心，建议你们：
1. 跑个批量重命名脚本统一格式
2. 在 ESLint 里强制开启 vue/component-definition-name-casing 规则
3. 加个 pre-commit hook 防止有人乱改

ps：别学某些团队为这事开两小时会，直接定个规范执行就完事了，代码一致性比争论对错重要。

2026-03-09 10:00