vue项目中命名规范

在Vue框架中，遵循良好的变量和类名命名规范是非常重要的，这有助于提高代码的可读性、可维护性和可扩展性。以下是一些建议的命名规范

常用命名介绍

• 帕斯卡命名法（PascalCase）：将多个单词连接在一起，每个单词的首字母大写，没有使用分隔符。常用于组件名称
• 驼峰名称法（ camelCase）：驼峰命名法是一种在复合名称或短语中使用大写字母作为第二个单词的首字母的方式。常用于 prop 名称、数据属性(data)、计算属性、方法名
• 短横线命名法（kebab-case ）：将多个单词用短横线连接。常用于类名、自定义事件名

组件命名

使用多个单词：使用多个单词（例如使用连字符 - 或 PascalCase）来命名组件，这样可以避免与现有的或未来的HTML元素冲突。

// Bad
export default {
  name: 'Todo'
}
 
// Good
export default {
  name: 'TodoItem'
}

使用短横线分隔：对于文件和模板中的组件，推荐使用短横线（kebab-case）来命名。

import TodoItem from './components/TodoItem.vue'
<!-- Bad -->
<TodoItem></TodoItem>
 
<!-- Good -->
<todo-item></todo-item>

数据属性（Data Properties）和计算属性（Computed Properties）

使用camelCase：在JavaScript中，推荐使用camelCase来命名数据属性和计算属性。

export default {
  data() {
    return {
      userProfile: {}, // Good
      user_profile: {} // Bad, 应该使用camelCase
    }
  },
  computed: {
    fullName() { // Good
      // ...
    },
    full_name() { // Bad, 应该使用camelCase
      // ...
    }
  }
}

方法（Methods）和事件处理器（Event Handlers）

使用camelCase：与数据属性和计算属性类似，方法名也应该使用camelCase。

methods: {
  submitForm() { // Good
    // ...
  },
  submit_form() { // Bad, 应该使用camelCase
    // ...
  }
}

Prop命名

使用camelCase或kebab-case：在父组件中传递到子组件的props，既可以使用camelCase（在JavaScript中）也可以使用kebab-case（在模板中）。推荐在模板中使用kebab-case。

// 在父组件中传递prop
<child-component my-prop="value"  @update-post="onUpdatePost"></child-component> // kebab-case in template

// 在子组件中接收prop
props: ['myProp'] // camelCase in JavaScript (or use object form for clarity)

CSS类名和样式绑定（Class Names and Style Bindings）

使用BEM或类似约定：对于CSS类名，可以使用BEM（Block Element Modifier）命名方法。这有助于清晰地表示组件的结构和状态。

<!-- Bad -->
<div class="button"></div>
<div class="button-active"></div>
<div class="button-disabled"></div>
 
<!-- Good -->
<div class="button button--active"></div>
<div class="button button--disabled"></div>

.button { /* block */ }
.button--active { /* modifier */ }
.button--disabled { /* modifier */ }

6. 避免使用保留字和Vue实例属性名称冲突的命名

避免使用Vue实例自带的属性名，如data, props, methods等作为自定义变量名。这可以防止潜在的命名冲突和错误。

// Bad - 会覆盖Vue实例的methods属性
methods: function() { /* ... */ }