css命名规范-Vue组件命名手册，命名不用愁

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

前言 自古以来，中国的命名文化博大精深，选择一个好名字往往是一件难事。 那么一个好名字能带来什么呢？ 名字的内涵必须符合用户的固有本质，不能与名人相同。 ，不易重名，创意新颖，真正体现出以名区分人的作用。 它响亮朗朗上口，读起来流畅好听，辅音优美，因为声音的意义也影响着人，对人也有条件反射。 易于书写css命名规范，易于记录。 禁忌过多的笔画不是节目里凡所的点名吗？ 组件的命名与其功能相匹配，不与其他业务组件重名，以便人们一眼就能区分出来。 它不一定要花哨，但要实用。 让开发者形成条件反射，看到名字就会想到这个组件的实用场景。 它易于书写和记忆，短小精悍，不冗长。 单文件组件的大小写

单文件组件要么始终以大写字母 (PascalCase) 开头，要么仍然以小写的 -connection (kebab-case) 单词开头。 它对于手动完成代码编辑器来说是最友好的，因为它提示我们在JS(X)和模板表单中引用组件尽可能保持一致。 然而，混合文件命名方法有时会导致不区分大小写的文件系统出现问题，这就是为什么破折号连接命名也是非常理想的。

基本组件命名

应用特定样式和约定的基础组件（即表示、无逻辑或无状态组件）都应以特定前缀开头，例如 Base、App 或 V。

**反例**
    components/
    |- button.vue
    |- loading.vue
    |- slide.vue

**正例**
    components/
    |- BaseButton.vue
    |- BaseLoading.vue
    |- BaseSlide.vue

单个活动实例的组件

单个活动实例的组件应使用前缀 The 命名，以显示其唯一性

这并不意味着该组件只能在单个页面上使用，而是每个页面只能使用一次。 这些组件从不接受任何 props，因为它们是为您的应用程序定制的css命名规范，而不是它们在您的应用程序中的上下文。 如果您发现有必要添加一个 prop，则意味着这实际上是一个可重用的组件，目前每个页面仅使用一次。

**反例**
    components/
    |- SaleManage.vue
    |- ImportExcel.vue

**正例**
    components/
    |- TheSaleManage.vue
    |- TheImportExcel.vue

紧密耦合的组件名称

与父组件紧密耦合的子组件应该以父组件的名称作为前缀。 如果一个组件仅在其父组件的某种场景下才有意义，那么这种关系应该体现在组件名称中，因为编辑器一般会按照字母顺序组织文件。

**反例**
    components/
    |- SearchBox.vue
    |- SearchItem.vue
    |- SearchButton.vue

**正例**
    components/
    |- SearchBox.vue
    |- SearchBoxItem.vue
    |- SearchBoxButton.vue

组件命中的短语顺序

组件名称应以高级（通常是描述性）单词开头，并以描述性修饰符结尾。

**反例**
    components/
    |- ClearSearchButton.vue
    |- ExcludeFromSearchInput.vue
    |- LaunchOnStartupCheckbox.vue
    |- RunSearchButton.vue
    |- SearchInput.vue
    |- TermsCheckbox.vue

**正例**
    components/
    |- SearchButtonClear.vue
    |- SearchButtonRun.vue
    |- SearchInputQuery.vue
    |- SearchInputExcludeGlob.vue
    |- SettingsCheckboxTerms.vue
    |- SettingsCheckboxLaunchOnStartup.vue

完整短语组件名称

编辑器中的手动补全已经相当友好了，这样写长组件名的成本已经可以忽略不计，而且同样的效率更容易理解，何乐而不为呢？

**反例**
    components/
    |- soManage.vue
    |- woManage.vue

**正例**
    components/
    |- SaleOrderManage.vue
    |- WorkOrderManage.vue

道具箱

声明时仍使用 (camelCase)，并且在模板和 JSX 中仍应使用 (kebab-case)。

只需遵循每种语言的约定即可。 JavaScript 中更自然的是驼峰命名法。 在 HTML 中，它是 kebab-case。

**反例**
props: {
  'greeting-text': String
}
<WelcomeMessage greetingText="hi"/>

**正例**
props: {
  greetingText: String
}
<WelcomeMessage greeting-text="hi"/>