命名规范
1.【强制】组件名应该始终是多个单词的,根组件App除外,但最多不超过5个单词
2.【强制】单⽂件组件的⽂件名应该始终是单词⼤写开头( PascalCase )
正例:
components/ |- MyComponent.vue
反例:
components/
|- mycomponent.vue
components/
|- myComponent.vue
3.【推荐】应⽤特定样式或者约定的基础组件应该全部以⼀个特定的前缀开头,⽐如 Base、App或 V
正例:
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue
components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue
反例:
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
4. 【推荐】只应该拥有单个活跃实例的单例组件应该以 The 前缀命名,以⽰其唯⼀性
正例:
components/
|- TheHeading.vue
|- TheSidebar.vue
反例:
components/
|- Heading.vue
|- MySidebar.vue
5. 【推荐】和⽗组件紧密耦合的⼦组件应该以⽗组件名作为前缀命名。
说明:如果⼀个组件只在某个⽗组件的场景下有意义,这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织⽂件,所以这样做可以把相关联的⽂件排在⼀起。
正例:
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue
反例:
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue
6. 【推荐】组件名应该以⾼级别的 (通常是⼀般化描述的) 单词开头,以描述性的修饰词结尾
正例:
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue
反例:
components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue
7.【推荐】组件名应该倾向于完整单词⽽不是缩写
正例:
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue
反例:
components/
|- SdSettings.vue
|- UProfOpts.vue
作者:刘冬冬 创建时间:2024-06-19 11:15
最后编辑:刘冬冬 更新时间:2024-06-26 16:33
最后编辑:刘冬冬 更新时间:2024-06-26 16:33