Vue 命名规范

本规范适用于 Vue2 和 Vue3。两者在命名规范上基本一致，主要区别在于 API 风格（Options API vs Composition API）。

规则

文件名：
- 组件文件使用大驼峰命名法（PascalCase）。
- 示例：UserProfile.vue、OrderList.vue
- 视图页面文件使用 View 后缀：UserListView.vue、OrderDetailView.vue
组件名（Component Name）：
- 在 components 目录中的组件使用多单词命名，避免与 HTML 标签冲突。
- 示例：BaseButton.vue、ThemePicker.vue、UserAvatar.vue
- 视图组件使用 View 后缀。
模板中组件引用：
- 在模板中使用大驼峰（PascalCase）或短横线（kebab-case）均可，建议统一使用大驼峰。
- 示例：<BaseButton> 或 <base-button>

Props 命名：

声明时使用小驼峰（camelCase）。
在模板中传递时使用短横线（kebab-case）。

示例：

// 声明
props: {
  userName: String,
  orderList: Array
}

<!-- 使用 -->
<user-profile user-name="John" order-list="orders"></user-profile>

Emits 命名：
- 使用短横线（kebab-case）。
- 示例：update:user-name、delete-order
数据属性（Data Properties）：
- 使用小驼峰（camelCase）。
- 避免与 props 同名。
- 示例：searchQuery、isLoading
方法名（Methods）：
- 使用小驼峰（camelCase）。
- 动词开头，清晰表达动作。
- 示例：handleSubmit、fetchOrders、toggleMenu
计算属性（Computed）：
- 使用小驼峰（camelCase）。
- 名词或名词短语表示派生数据。
- 示例：formattedName、filteredOrders、isLoading
** watchers**：
- 方法名与被监听的属性同名。
- 示例：watch: { searchQuery(newValue) { ... } }
CSS 类名：
- 使用短横线连接（kebab-case）。
- 若使用 scoped CSS，建议添加组件名前缀。
- 示例：.user-profile-header、.order-list-item
组合式函数（Composition API - Vue3 特有）：
- 文件名以 use 开头，使用小驼峰。
- 示例：useFetch.js、useMouse.js
- 函数名以 use 开头，使用小驼峰。
- 示例：function useFetch(url) { ... }
响应式变量（Composition API）：
- 使用小驼峰（camelCase）。
- ref 变量：count、userName
- reactive 对象：state、form
Provide / Inject：
- 使用 Symbol 或字符串常量。
- 命名清晰表达提供的功能。
- 示例：provide('currentUser', user)、inject('currentUser')

Vue2 与 Vue3 的差异说明

项目	Vue2 (Options API)	Vue3 (Composition API)
数据定义	`data()` 返回对象	`ref()` 或 `reactive()`
方法定义	`methods` 选项	直接在 `setup()` 中定义
计算属性	`computed` 选项	`computed()` 函数
侦听器	`watch` 选项	`watch()` 或 `watchEffect()` 函数
命名规范	✅ 相同	✅ 相同

结论：Vue2 和 Vue3 在命名规范上没有本质差异，仅 API 使用方式不同。

示例

正确示例

<!-- UserProfile.vue -->
<template>
  <div class="user-profile">
    <base-button @click="handleClick">Click Me</base-button>
  </div>
</template>

<script>
export default {
  name: 'UserProfile',
  props: {
    userName: String,
    userAge: Number
  },
  emits: ['update:userName'],
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    handleClick() {
      this.$emit('update:userName', 'New Name')
    }
  }
}
</script>

<style scoped>
.user-profile {
  padding: 20px;
}
</style>

Composition API 示例（Vue3）

<!-- UserProfile.vue -->
<template>
  <div class="user-profile">
    <base-button @click="handleClick">Click Me</base-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import BaseButton from './BaseButton.vue'

const props = defineProps({
  userName: String,
  userAge: Number
})

const emit = defineEmits(['update:userName'])

const isActive = ref(false)

const handleClick = () => {
  emit('update:userName', 'New Name')
}
</script>

<style scoped>
.user-profile {
  padding: 20px;
}
</style>

错误示例

<!-- user-profile.vue -->  <!-- ❌ 文件名应为大驼峰 -->
<template>
  <div class="userprofile">  <!-- ❌ 类名应使用短横线 -->
    <button @click="clickme">Click</button>  <!-- ❌ 方法名应使用小驼峰 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isactive: false  // ❌ 变量名应使用小驼峰
    }
  }
}
</script>

适用范围

Vue2 项目（Options API）
Vue3 项目（Options API 和 Composition API）
Vue 组合式函数（Composables）

4.9 KiB Raw Permalink Blame History Unescape Escape

Vue 命名规范

规则

Vue2 与 Vue3 的差异说明

示例

正确示例

Composition API 示例（Vue3）

错误示例

适用范围

4.9 KiB

Raw Permalink Blame History