🧠Vue 项目中的 JS 文件命名规范实战指南：让代码一眼读懂！
🧠Vue 项目中的 JS 文件命名规范实战指南：让代码一眼读懂！
在 Vue 项目开发过程中，我们经常会遇到这样的疑问：“这个 JS 文件到底该怎么命名？” 是
TestSuiteDialog.js还是test-suite-dialog.js？是projectApi.js还是project-api.js？
别慌！今天这篇文章就来帮你厘清命名规范，告别混乱无序，让项目结构更清晰、维护更高效！
✅ 命名格式概览
Vue 项目中常见的 JS 文件命名格式主要包括：
1️⃣ PascalCase（大驼峰）
📦 适用场景：组件、页面逻辑相关 JS 文件
📌 示例：
TestSuiteDialog.jsUserManagement.js
🎯 优点：与 Vue 单文件组件
.vue文件的命名习惯保持一致，方便查找与关联。
2️⃣ kebab-case（短横线）
📦 适用场景：配置文件、路由模块
📌 示例：
test-suite-dialog.jsapp-config.js
🎯 优点：适合文件路径与 URL 映射，易读性强，适配 Linux 等大小写敏感的系统。
3️⃣ camelCase（小驼峰）
📦 适用场景：工具函数、API 请求模块
📌 示例：
testSuiteApi.jsutils.js
🎯 优点：与函数/变量命名风格一致，适用于封装逻辑模块或请求封装。
🧭 不同场景下的命名建议
| 📁 场景 | ✅ 推荐格式 | 💡 示例 |
|---|---|---|
| 组件相关 JS | PascalCase / kebab-case | CaseSelector.vue / case-selector.js |
| API 请求模块 | camelCase | testSuiteApi.js, projectApi.js |
| 工具函数 | camelCase | utils.js, validation.js |
| 路由模块 | kebab-case | test-suite-routing.js |
| 配置文件 | kebab-case / camelCase | app-config.js, config.js |
⚠️ 命名注意事项
1. 保持一致性是关键！
同一个项目中，建议大家团队内部统一命名规范，避免一边使用 PascalCase，另一边用 camelCase，不利于后期维护。
2. 命名清晰表达功能
文件名应能直观反映其功能或模块用途，例如：
testSuiteApi.js👉 涉及测试套件的 API 封装case-selector.js👉 与测试用例选择器组件相关的逻辑
3. 考虑操作系统大小写敏感问题
部分系统（如 Linux）对文件名区分大小写，推荐统一使用 小写字母命名，结合 kebab-case/camelCase 更加稳妥。
🧩 实际项目中的命名示例分析
比如你项目中有以下路径：
frontend/src/components/api-test/TestSuiteDialog.vue |
对应的 JS 文件可以命名为：
- ✅
TestSuiteDialog.js👉 搭配组件的逻辑文件，使用 PascalCase 保持一致 - ✅
testSuiteApi.js👉 与测试套件 API 相关的请求封装，使用 camelCase
这样的命名方式既符合 Vue 社区的主流实践，也有助于快速识别文件职责、定位功能模块，为多人协作打下良好基础。
✨ 小结一下！
🧩 Vue 项目的 JS 文件命名其实没那么复杂，关键是——清晰、统一、表达准确！
✅ 推荐口诀送给你：
组件用 PascalCase，配置路由用 kebab-case，工具 API 用 camelCase！
只要团队内部约定好规范，代码维护效率分分钟提升一个档次！
你们项目有没有踩过命名混乱的坑？欢迎在评论区分享交流👇
