在Vue.js的开发过程中，遵循一定的命名规范是保证代码可读性、可维护性的关键。良好的命名习惯不仅能够提升团队协作效率，还能使代码整洁如艺术品。本文将详细介绍Vue.js的命名规范，并提供一些实用的技巧。

1. 文件命名规范

1.1 根目录名单词用中划线分割

在根目录下，文件和文件夹的命名应使用中划线分割的单词形式，例如：components, views, services。

1.2 目录命名：单词采用中划线方式分割

在子目录中，同样采用中划线分割的单词形式，例如：components/user, views/order.

1.3 文件命名：采用小驼峰式命名法

文件命名应采用小驼峰式命名法，例如：user-list.vue, order-detail.vue。

1.4 组件/页面命名：采用大驼峰式命名法

组件和页面的命名应采用大驼峰式命名法，例如：UserList, OrderDetail。

2. 单文件属性命名顺序

在Vue组件中，单文件的属性命名顺序如下：

  • export default
    • name
    • components
    • mixins
    • props
    • data()
    • provide()
    • inject
    • watch
    • computed
    • activated()
    • deactivated()
    • beforeCreate()
    • created()
    • beforeMount()
    • mounted()
    • beforeUpdate()
    • updated()
    • beforeDestroy()
    • destroyed()
    • methods

3. 自定义事件

自定义事件命名应使用@on-事件名的形式，处理函数使用handle动词，例如：@on-click="handleClick"。

4. 常量

常量命名应使用全大写，单词间用下划线分割，例如：MAX_COUNT, API_URL。

5. 引号混用

  • HTML模板中属性使用双引号，例如：<div id="app"></div>。
  • JavaScript中声明的字符串使用单引号，例如：const name = '张三';。

6. props声明详细

在声明props时，定义类型和默认值，例如：props: { greetingText: String, required: true, validator: function(value) { return value.length > 0; } }。

7. computed属性

computed属性必须有默认返回值，所有分支也需要有返回值，例如：

computed: {
  fullName() {
    if (this.firstName && this.lastName) {
      return `${this.firstName} ${this.lastName}`;
    }
    return '';
  }
}

8. v-for要设置唯一标识key

在使用v-for时，必须设置唯一标识key，例如：

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

9. 标签里的属性多行写

标签里的属性应多行写，以提高可读性，例如：

<div
  id="app"
  class="container"
  :class="{ active: isActive }"
  @click="handleClick"
></div>

10. 模板里的表达式尽量简单

模板里的表达式应尽量简单，避免复杂的逻辑，例如：

<div v-if="items.length > 0 && !isLoading">
  <!-- 列表内容 -->
</div>

11. 组件名为多个单词，可以预防与HTML语义化标签冲突

组件名为多个单词时，可以预防与HTML语义化标签冲突，例如：<my-component></my-component>。

12. 样式防止污染需要加scoped，样式名尽量语义化

在Vue组件中，使用scoped属性来防止样式污染，样式名尽量语义化，例如：

<style scoped>
.container {
  width: 100%;
  padding: 20px;
}
</style>

通过遵循以上命名规范，可以使Vue.js代码更加整洁、易读、易维护。希望本文能帮助你提升Vue.js开发技能，创作出更加优美的代码作品！