一、规范命名的重要性
易懂、通用、规范、标准、专业性、是经验积累的体现
1.1、常见命名方法
| 序号 | 命名方法 | 解释 |
| 1 | 全小写 | |
| 2 | 全大写 | |
| 3 | 驼峰：小驼峰命名法 | |
| 4 | 驼峰：大驼峰命名法 | |
| 5 | 烤串命名法 / 脊柱命名法 | |
| 6 | 下划线分隔法 |
二、项目名
采用小写字母和中划线（-）连接的方式命名，如my-project
| 序号 | 规则 | 举例 |
| 1 | 采用小写字母和中划线（-）连接的方式命名 | my-project |
三、目录 / 文件夹
重要：目录架构既要符合前端行业通用规则，又要满足项目的业务架构。层次分明，分工明确，从目录架构反过来能理解整个项目的业务架构。
3.1、整体原则
| 序号 | 原则 | 解释 |
| 1 | 简洁明了 | 命名应简洁明了，能够清晰地表达文件夹/目录的用途或内容。 |
| 2 | 一致性 | 在整个项目中保持命名规则的一致性，以便其他开发者能够快速理解和使用。 |
| 3 | 小写字母 | 为了避免大小写敏感问题，建议使用小写字母进行命名。 |
| 4 | 使用连字符 | 如果文件名包含多个单词，建议使用连字符（-）或下划线（_）进行分隔，但通常连字符在前端项目中更为常见。 |
3.2、具体规则
| 序号 | 规则 | 举例 |
| 1 | 采用小驼峰（camelCase）命名法 即第一个单词首字母小写，后续单词首字母大写。 如有复数结构时（此文件夹包含多个子文件夹或文件），可以采用复数命名法，如components、assets | camelCase |
| 2 | 也可以考虑使用小写字母和中划线（-）连接的方式，但这种方式在前端项目中较少见，更多用于文件名或类、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、小写命名 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 |
五、CSS 样式
class / id
驼峰、烤串命名、蛇形命名
CSS 命名规范，将省下你大把调试时间 - 知乎
常用CSS的命名规范:_Aiden_xiaoGuo的博客-CSDN博客_css命名规范
六、事件
6.1、handle + 行为描述
考证element-ui
6.2、动词+内容
js事件名称集_aら 淼的博客-CSDN博客_事件名称
https://wenku.baidu.com/view/8fcc71a96b0203d8ce2f0066f5335a8102d2661d.html
更多内容待补充
七、变量
js命名规范 - 腾讯云开发者社区-腾讯云
https://www.csdn.net/tags/MtjaQg1sMDgwMjMtYmxvZwO0O0OO0O0O.html
JavaScript：变量命名的规范_Argonaut_的博客-CSDN博客_js变量命名规范
js变量命名规范 - 百度文库
八、方法
如 vue method 的方法
JavaScript命名规范_菜鸟_小卡酷谋的博客-CSDN博客_js命名规范
九、url 及 参数
1、URL越短越好
2、避免太多参数
3、目录层级较少
4、具有描述性
5、包含关键词
6、字母全部小写
7、使用连词符
网站URL规范化设计的8个命名规则_目录_文件_字母
URL规范有哪些-SEO-PHP中文网
URL命名规范_风的着点的博客-CSDN博客_url命名规范
url 命名规范_whatday的博客-CSDN博客_url命名规范
URL命名规则 - 百度文库
十、注释
前端：HTML、CSS、JavaScript 代码注释 / 注释与代码规范_html注释-CSDN博客
十一、git 提交
vue3-ts：Commitlint / 规范化Git提交消息格式_commitlint 规范-CSDN博客
十二、欢迎交流指正
遵循命名规则，可以创建一个结构清晰、易于维护的前端项目
十三、参考链接
规范：接口返回的字段命名规范考证_php接口返回驼峰还是下划线-CSDN博客
前端代码规范-命名规范-阿里云开发者社区
前端代码命名规范_Tl丶落樱无痕的博客-CSDN博客_前端代码命名规范
Aotu.io - 前端代码规范
概述 | Aotu.io - 前端代码规范
微社区技术规范站
TGideas文档库
GitHub - ecomfe/spec: This repository contains the specifications.
GitHub - standard/standard: 🌟 JavaScript Style Guide, with linter & automatic code fixer
ES6 入门教程
ESLint - 插件化的 JavaScript 代码检测工具 - ESLint中文文档
代码规范 - Apache ECharts
