适用: Vue3 + TypeScript 项目,统一目录、文件、变量、函数、Hooks、工具类、组件命名规范,兼顾可读性、团队协作。
| 目录名 | kebab-case |
| 组件的目录名 | PascalCase |
| 组件文件名(注册名) | PascalCase |
| hooks 文件名 | kebab-case |
| tools 文件名 | camelCase |
| Store 文件名 | kebab-case |
| 类型定义文件名 | types/kebab-case.ts |
| 单个组件类型定义文件名 | PascalCase.types.ts |
| hooks 函数名 | camelCase |
| Store 函数名 | camelCase |
| Interface / Type 名 | PascalCase |
| 函数和方法 | camelCase |
| class | PascalCase |
以上是整合了多个高星开源项目,整理了各大 AI 的回答整理出来的大概命名规范,里边还有很多值得纠结的地方,现实中大家的项目一般都是各有各的规范。
乱吗? 说实话,这太乱了老铁,稍微不注意就用错了;
- 那么目录名大小写乱用,有影响吗?没影响
- 组件小写开头,影响导入、影响编译吗?不影响
- 全局类型定义使用 camelCase 有影响吗?也没有影响
在 vue 中,只要你能写对导入路径,那么代码就能正常运行,现代的编辑器,几乎都能在写导入路径时,给到开发者智能提示,何不将命名规范简化为:
| 目录名 | camelCase |
| 组件的目录名 | camelCase |
| 组件文件名(可选导入为 PascalCase) | camelCase |
| hooks 文件名 | camelCase |
| tools 文件名 | camelCase |
| Store 文件名 | camelCase |
| 类型定义文件名 | types/camelCase.ts |
| 单个组件类型定义文件名 | camelCase.types.ts |
| hooks 函数名 | camelCase |
| Store 函数名 | camelCase |
| 函数和方法 | camelCase |
| Interface / Type 名 | PascalCase |
| class | PascalCase |
是不是简单多了,何必去纠结于命名,一套规则通杀,不用反复区分浪费生命;之所以大量使用 camelCase,主要还是为了兼容 hooks,和 函数、方法,这三样使用 camelCase 已经是共识了。
我使用这套简单粗暴版的规范已经有段时间了,没有出现过任何因为命名产生的问题,看着也非常舒服,特分享给大家。


![[特殊字符]DeepSeek‑Harness(DSH)小白保姆教程-171主机测评](https://www.171host.com/wp-content/uploads/2026/08/20260816085112-6a817a009aabf-220x150.png)