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