规范：项目、目录、文件、样式、事件、变量、方法、url参数、注释、git提交命名规范及考证

一、规范命名的重要性

易懂、通用、规范、标准、专业性、是经验积累的体现

1.1、常见命名方法

序号	命名方法	解释
1	全小写
2	全大写
3	驼峰：小驼峰命名法
4	驼峰：大驼峰命名法
5	烤串命名法 / 脊柱命名法
6	下划线分隔法

二、项目名

采用小写字母和中划线（-）连接的方式命名，如my-project

序号	规则	举例
1	采用小写字母和中划线（-）连接的方式命名	`my-project`

三、目录 / 文件夹

重要：目录架构既要符合前端行业通用规则，又要满足项目的业务架构。层次分明，分工明确，从目录架构反过来能理解整个项目的业务架构。

3.1、整体原则

序号	原则	解释
1	简洁明了	命名应简洁明了，能够清晰地表达文件夹/目录的用途或内容。
2	一致性	在整个项目中保持命名规则的一致性，以便其他开发者能够快速理解和使用。
3	小写字母	为了避免大小写敏感问题，建议使用小写字母进行命名。
4	使用连字符	如果文件名包含多个单词，建议使用连字符（-）或下划线（_）进行分隔，但通常连字符在前端项目中更为常见。

3.2、具体规则

序号

规则

举例

采用小驼峰（camelCase）命名法

即第一个单词首字母小写，后续单词首字母大写。

如有复数结构时（此文件夹包含多个子文件夹或文件），可以采用复数命名法，如components、assets

camelCase

也可以考虑使用小写字母和中划线（-）连接的方式，但这种方式在前端项目中较少见，更多用于文件名或类、ID的命名

my-task

3.3、通用命名

序号	名称	解释
1	src	包含源代码的文件夹
2	components	包含Vue组件的文件夹（复数命名）
3	assets	包含静态资源的文件夹（复数命名）
4	utils	包含工具函数的文件夹（复数命名）
5	views	包含路由页面的文件夹（复数命名）

3.4、注意事项

序号	事项	解释
1	避免使用保留字	避免使用操作系统或编程语言中的保留字作为文件夹/目录名，以免引起冲突或误解。
2	避免使用空格和特殊字符	空格和特殊字符可能会在某些环境下导致问题，因此建议使用下划线（_）或中划线（-）作为单词之间的分隔符。
3	考虑国际化	如果项目需要支持多种语言，命名时应考虑国际化因素，避免使用具有特定文化含义的词汇。

3.5、gitee / github 实例

序号	来源 / 项目	截图	目录分析
1	gitee / vue		1、小写命名 2、中划线 / '-' 命名 vue: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
2	gitee / RuoYi		1、小写命名 2、中划线 / '-' 命名 RuoYi-Vue: 🎉 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本
3	gitee / element		1、小写命名 2、中划线 / '-' 命名 3、底划线 / '_' 命名 https://gitee.com/ElemeFE/element/tree/dev

四、文件名

4.1、整体规则

同 3.1 整体原则

4.2、具体命名规则

序号	规则	详细
1	组件文件名	1、对于Vue、React等框架的组件文件，通常使用小驼峰（camelCase）命名法，但文件名本身（不包括扩展名）往往使用小写字母和连字符（-）连接的方式，以匹配HTML中的class命名习惯。例如，MyComponent.vue在HTML中可能作为<my-component>使用，因此文件名可以命名为my-component.vue。 2、另一个常见的做法是，即使内部组件类名使用小驼峰，文件名也保持小写字母和连字符的形式，如UserProfile.vue的文件名可以命名为user-profile.vue。
2	样式文件名	样式文件（如CSS、SCSS、LESS等）通常使用小写字母和连字符（-）连接的方式命名，以匹配CSS类名的命名习惯。例如，styles.css、main-layout.scss。
3	脚本文件名	JavaScript、TypeScript等脚本文件可以使用小写字母和连字符（-）或点（.）连接的方式命名，但点通常用于表示文件类型或模块结构（如utils.js、app.module.ts）。然而，在前端项目中，更常见的做法是使用小驼峰命名法（不包括扩展名），如main.js、app.ts，或者简单的文件名加上扩展名，如index.js。
4	图片和媒体文件名	1、图片和媒体文件（如PNG、JPG、GIF、SVG等）通常使用小写字母、数字和连字符（-）命名，以描述文件的内容或用途。例如，logo.png、background-image.jpg。 2、对于需要描述多个属性的图片，可以使用连字符分隔属性，如user-profile-avatar.png。
5	测试文件名	测试文件（如单元测试、集成测试等）通常使用与被测试文件相同的命名规则，但会在文件名后添加.test、.spec或.spec.js等后缀以标识其为测试文件。例如，user-profile.spec.js

4.3、注意事项

序号	事项	详细
1	避免使用保留字	避免使用操作系统或编程语言中的保留字作为文件名，以免引起冲突或误解
2	避免使用空格	空格可能会导致在某些环境下出现问题，因此建议使用连字符（-）或下划线（_）作为单词之间的分隔符
3	考虑文件类型	文件名应包含文件类型扩展名，以便快速识别文件的类型和内容

4.4、实例

序号	来源 / 项目	截图	目录分析
1	gitee / vue		1、小写 2、烤串 vue: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. - Gitee.com
2	gitee / RuoYi		1、小写 2、驼峰 3、底划线 RuoYi-Vue: 🎉 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本 - Gitee.com
3	gitee / element		1、小写 2、烤串 element: Element 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。 - Gitee.com