Vue开发中的命名规范：目录名、文件名、函数名、变量名、数据库字段等

Vue开发中的命名规范：目录名、文件名、函数名、变量名、数据库字段等

引用

CSDN

1.

https://blog.csdn.net/snans/article/details/143252485

在Vue开发中，合理的命名规范不仅能提升代码的可读性和可维护性，还能避免因命名不规范导致的错误。本文将详细介绍Vue项目中目录名、文件名、函数名、变量名、数据库字段名等的命名规则。

目录名

• 通常使用kebab-case（短横线命名法），全部小写，并使用连字符分隔。
• 示例：components/user-profile、views/dashboard。如果项目中使用Vue Router，文件夹的命名通常与路由路径保持一致。
• 小驼峰命名法（camelCase）
• 示例：- componentsDirectory
  连字符命名法在目录结构看起来更清晰，特别是当目录名是由多个单词组成时，每个单词之间用连字符隔开，易于阅读和理解。小驼峰命名法在一些需要与 JavaScript 代码风格保持一致的情况下也可以使用，但对于一些不熟悉代码的人来说，可能连字符命名法在视觉上更友好。

文件名

• 单文件组件（SFC）：使用PascalCase（大驼峰命名法），并以.vue结尾。
• 示例：UserProfile.vue、ShoppingCart.vue。
• 普通JavaScript文件：
• 如果是工具函数、配置文件等，使用kebab-case（短横线命名法）或camelCase（驼峰命名法）。
• 示例：my-utils.js（使用短横线命名法）、apiUtils.js（使用驼峰命名法）。
• 属于组件的.js文件，使用PascalCase（大驼峰命名法）。
• 示例：MyComponent.js。
• 其他文件（如CSS、LESS等）：除.vue文件外，其他文件统一使用kebab-case（短横线命名法）。
• 示例：my-component.less。
  小驼峰命名法适用于在 JavaScript 代码内部主要使用的文件，而连字符命名法在文件名需要在 HTML（如在script标签的src属性中）或者其他对连字符更友好的环境中引用时比较方便。

函数名

• Vue 组件内部的方法命名规范：以动词开头，使用小写驼峰式（camelCase）描述动作或状态。
• 示例：getSomething()（获取某个东西）、updateValue()（更新一个值）、handleEvent()（处理一个事件）、formatName()（格式化一个名称）、isItemSelected()（判断一个项是否已选择）。
• 全局函数（如果有）：同样推荐使用驼峰命名法。
• 例如，在一个 Vue 项目的工具函数库中，函数名可以是formatDate、calculateTotal等，这样可以使函数名在代码中清晰地展示其功能。
  JavaScript 本身的函数命名习惯就是驼峰命名法，并且在 Vue 组件内部，这样的命名方式与其他 JavaScript 代码风格保持一致，易于阅读和理解。

变量名

• 一般命名规范：主要遵循JavaScript的命名规范，通常使用camelCase（小驼峰命名法）。
• 示例：userProfile、isLoading。在Vue组件的data、computed、methods等选项下的属性或方法命名也应遵循此规范。
• 全局变量：采用大写与下划线命名规范
  在 Vue 组件的数据属性（data选项）、计算属性（computed选项）和监听器（watch选项）中：使用小驼峰命名法（camelCase）。例如，userName、totalCount等。这与 JavaScript 的变量命名风格一致，方便在组件内部进行数据操作和逻辑处理。
  在模板（template选项）中引用变量：同样使用小驼峰命名法。因为模板中的变量引用是与组件内部的 JavaScript 代码相关联的，保持一致的命名风格可以避免混淆。

数据库字段名

• 命名规范：数据库字段名的命名通常取决于具体的数据库管理系统和团队的命名约定。在Vue项目中，当与后端进行数据交互时，需要确保字段名与后端接口保持一致。
• 常见规范：使用有意义的名词或形容词来描述字段的功能或含义，避免使用单词缩写、不清晰的名字或过于简单的名字。在某些情况下，可能会使用下划线（_）来分隔多个单词，但这通常取决于具体的数据库命名约定。
  推荐使用下划线命名法（snake_case）。例如，user_name、create_date等。在数据库领域，特别是关系型数据库中，下划线命名法是一种非常常见的命名风格。它使得字段名在 SQL 查询等操作中易于阅读和理解，并且可以避免因为大小写敏感等问题导致的错误。而且，当数据库字段名与后端代码（如 Python 的 Django 框架、Node.js 的 Sequelize 等）进行交互时，下划线命名法也更容易进行映射和处理。

json格式数据的键名

在JSON格式中，通常推荐使用 小写加下划线分隔（snake_case）或者 小写驼峰命名法（camelCase）来命名键。具体选择可以根据团队约定或使用的编程语言习惯：

• snake_case（下划线分隔）：
• 示例：“parent_id”: “12345” 和 “user_id”: “abc123”
  很常见于后端系统，尤其是在数据库设计或配置文件中。这种风格在数据库字段或服务器端开发中应用较多，一些主流语言如Python、Ruby等也偏好这种命名方式。
• camelCase（驼峰命名）：
• 示例：“parentId”: “12345” 和 “userId”: “abc123”
  比较适合前端和API设计，尤其是在JavaScript中更常见。驼峰命名在前端开发、JSON API、和一些主流的REST API中较为普遍，前后端兼容性也不错。

总结

综上所述，Vue开发中命名规范的总结如下：

• 驼峰命名法（camelCase）：主要用于函数名、普通JavaScript文件的命名（非组件）。
• 大驼峰命名法（PascalCase）：主要用于单文件组件（SFC）的命名。
• 短横线命名法（kebab-case）：主要用于目录名、其他类型文件的命名（如CSS、LESS等）。
• 下划线（_）：在变量名和数据库字段名中可能使用，但具体取决于团队的命名约定和数据库管理系统的命名规则。
• 全部小写：通常用于目录名和某些特定类型文件的命名（如CSS类名，但需注意BEM命名法等特定规范）。
• 请注意，这些命名规范并非绝对，实际项目中可能会根据团队的具体约定和项目的实际需求进行适当调整。

运用

虽然下划线写起来很麻烦，但我个人还是非常不喜欢用驼峰法，因为在对大小写不敏感的系统里出现疏忽就会有问题，尤其新人团队。
不过既然前端用的是对大小写敏感的javascript，那么考虑再三结合实际使用，采取如下策略：

• 目录名：小驼峰法，开头字母小写，第一层目录尽量简约用一个单词，其它层目录使用驼峰。
• 例如：
  utils/utilCrypto/
• 文件名：非vue页面开头使用小驼峰法，vue页面尤其组件使用大驼峰法，以示区分。
• 例如：
  utilBase64.ts
  、
  Register.vue
• 命名空间名：小驼峰法，开头字母大写，尽量与文件名相同。
• 例如：文件
  utilBase64.ts
  中命名空间
  utilBase64
• 类名：大驼峰法，开头字母大写。
• 例如：
  Base64Handler
• 类别名：大驼峰法，开头字母大写。
• 例如：
  FlatMenuItem
• 接口名：大驼峰法，开头字母大写。区分类型/接口与普通变量、函数或实例名称，使代码更具可读性和一致性
• 例如：
  RegForm
• 函数名：小驼峰法，开头字母小写。
• 例如：
  setItem()
• 变量名：小驼峰法，开头字母小写，全局变量或常量等小部分情况考虑大驼峰法或全大写。
• 例如：
  useBase64Util
  、
  SYS_START_TIME
• 键名（json、param、query等传递的参数名）：全小写，使用下划线
  _ 分割，因为往往与后端匹配。
• 例如：
  { "_id": "apply_start", "parent_id": "apply", "icon": "Document"}
• 字段名：全小写，使用下划线
  _ 分割，涉及到数据库，同时与前端格式匹配。
• 例如：
  state
  、
  is_top
• 特殊：所有命名中
  特殊的
  或
  系统级的
  或者
  私有的
  可根据情况增加前后下划线
  、_
  前缀。
• 例如
  _id
  、
  GetAllTabs