文件命名规范

项目名

# kebab-case
my-project-name

文件夹

# kebab-case
aa-bb/

公共组件

# 始终 PascalCase，或始终使用 kebab-case。
# 高级别的（一般化描述的） + 描述性的修饰词
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

静态文件

# 图像文件
img/
|- banner_sina.gif
|- logo_police.gif

# HTML
# 小写、优先使用单个单词
# 多个单词使用 下划线
|- success_report.html

# CSS
# 小写、优先使用单个单词、下划线开头
# 多个单词使用 kebab-case
assets/css/
|- _color.scss
|- xxx-ui.css

# 源码脚本
lib/
|- aa_bb.ts

编译文件

# 单文件组件
|- hello-word.vue

# 工具函数 JS
# 小写、优先使用单个单词
# 多个单词使用 kebab-case
|- index.js
|- date-util.js

特殊单词命名

单例组件名

# 每个页面只使用一次
# 不接受任何 prop
# `The` 前缀命名
components/
|- TheHeading.vue
|- TheSidebar.vue

基础组件名

# 展示类的、无逻辑、无状态、不掺杂业务逻辑
# 页面内可使用多次，不同页面也可复用，是高可复用组件
# `Base` 前缀命名
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

业务组件

# 只在当前项目中会用到，不具有通用性
# 掺杂了复杂业务的组件，拥有自身 data、prop 的相关处理
# `Custom` 前缀命名
components/
|- CustomCard.vue

紧密耦合的组件名

# 和父组件紧密耦合的子组件应该以父组件名作为前缀命名
# `以父组件` 前缀命名
components/
|- TodoList.vue # 父组件
|- TodoListItem.vue # 子组件
|- TodoListItemButton.vue # 子组件