Vue 3.0 命名规范

Vue 3.0 命名规范

本文档概述了在 Vue 3.0 中推荐使用的命名规范，以确保代码的一致性和可读性。

文件和组件命名

组件文件

• PascalCase：组件文件的命名应该使用帕斯卡命名法（每个单词的首字母大写）。
• 单文件组件：单文件组件的文件名应该与组件名保持一致。
• 示例：MyComponent.vue

实例文件

• 驼峰式命名：实例文件（例如，Vue 实例、插件、混入等）应该使用驼峰式命名法。
• 示例：main.js, store.js

常规文件

• 小写字母和短横线：非组件 JavaScript 文件应该使用小写字母和短横线来命名。
• 示例：helpers.js, directives.js

组件和Props命名

组件命名

• PascalCase：组件名应该使用帕斯卡命名法。
• 示例：MyComponent, TodoItem

Props命名

• CamelCase：Props 应该使用驼峰式命名法。
• 示例：playerId, maxLength

事件命名

• kebab-case：事件名应该使用短横线分隔式命名法。
• 动词+名词：事件名通常以描述动作的动词开始，然后是受影响的名词。
• 示例：update-player-stats, item-selected

变量和方法命名

变量命名

• CamelCase：变量名应该使用驼峰式命名法。
• 使用 const：默认使用 const 声明变量，只有当变量需要被重新赋值时，才使用 let。
• 避免缩写：除非缩写是广泛认可的，否则应避免使用缩写。
• 示例：playerName, maxLength

方法命名

• CamelCase：方法名应该使用驼峰式命名法。
• 动词：方法名通常以描述动作的动词开始。
• 明确且具体：确保方法名能够明确表示它执行的操作。
• 示例：updatePlayerStats, selectItem

模板和样式命名

模板中的绑定

• 短横线分隔式：在模板中使用的变量和属性应该使用短横线分隔式命名法。
• 示例：v-bind:player-id, v-model:max-length

样式类命名

• 短横线分隔式：CSS 类名应该使用短横线分隔式命名法。
• BEM（块、元素、修饰符）：考虑使用 BEM 命名法来命名复杂的组件样式。
• 示例：.player-profile, .todo-item__title, .button--primary

总结

遵循这些命名规范可以帮助你编写清晰、易于维护的代码。每个项目和团队可能有自己的一套规则，所以最重要的是保持一致性和可读性。始终确保你的命名选择能够清楚地传达意图，并且在整个项目中保持一致。