Vue項(xiàng)目命名規(guī)范指南（適用于 Vue 3 + Pinia + Vue Router）

目的：統(tǒng)一命名風(fēng)格，提升可讀性、可維護(hù)性和團(tuán)隊(duì)協(xié)作效率。

一、通用原則

二、組件相關(guān)命名規(guī)范

1. 組件文件名

• 使用 PascalCase 或 KebabCase。
• 推薦使用 PascalCase，便于在 JS 中直接引用。

components/
  UserProfile.vue        ? 推薦
  userProfile.vue        ? 不推薦（容易與變量混淆）
  user-profile.vue       ? 在模板中使用時(shí)推薦

2. 組件注冊(cè)與使用

• 注冊(cè)時(shí)使用 PascalCase：

import UserProfile from './components/UserProfile.vue'

• 模板中使用 kebab-case：

<template>
  <user-profile :user="user" />
</template>

3. Props 命名（組件間傳參）

• 使用 camelCase（JS 中），模板中用 kebab-case。
• 避免縮寫(xiě)（除非是通用縮寫(xiě)如 id, url）。

props: {
  userName: String,
  isActive: Boolean,
  userId: Number
}

<template>
  <UserCard :user-name="name" :is-active="true" />
</template>

三、Vue Router 相關(guān)命名規(guī)范

1. 路由路徑（URL）

• 使用 kebab-case，清晰表達(dá)資源結(jié)構(gòu)。

{
  path: '/user-profile',
  name: 'UserProfile',
  component: () => import('../views/UserProfile.vue')
}

2. 路由名稱(chēng)（name）

• 使用 PascalCase，與組件名保持一致。

name: 'UserProfile'

3. 動(dòng)態(tài)參數(shù)命名

• 參數(shù)名使用 kebab-case（URL），JS 中訪問(wèn)使用 camelCase。

path: '/user/:user_id' // URL 中使用
$route.params.userId    // JS 中自動(dòng)轉(zhuǎn)為 camelCase

四、Pinia 狀態(tài)管理命名規(guī)范

1. Store 文件名

• 使用小駝峰命名，以 .store.js 或 .store.ts 結(jié)尾。

stores/
  userStore.js
  cartStore.js

2. State 屬性命名

• 使用 camelCase，語(yǔ)義明確。

state: () => ({
  user: null,
  isLoading: false,
  activeTab: 'dashboard'
})

3. Actions 命名

• 動(dòng)詞開(kāi)頭 + 名詞，表示動(dòng)作。

actions: {
  async fetchUser(userId) {},
  updateUser(userData) {}
}

4. Getters 命名

• 名詞或形容詞為主，表示派生狀態(tài)。

getters: {
  isLoggedIn: (state) => !!state.user,
  fullName: (state) => `${state.firstName} ${state.lastName}`
}

五、變量與函數(shù)命名規(guī)范

1. 變量命名

• 使用 camelCase。
• 避免模糊命名（如 data, info），應(yīng)具體說(shuō)明用途。

let currentUser = null;
let loadingCount = 0;

2. 函數(shù)命名

• 動(dòng)詞開(kāi)頭，描述行為。

function validateForm() {}
function submitData(data) {}

3. 布爾類(lèi)型變量命名

• 以 is, has, should 開(kāi)頭。

let isActive = false;
let hasPermission = true;

六、常量命名規(guī)范

• 使用全大寫(xiě) + 下劃線分隔。
• 通常用于配置項(xiàng)、枚舉、固定值等。

const MAX_RETRY_COUNT = 3;
const USER_ROLES = ['admin', 'editor', 'viewer'];

七、事件命名規(guī)范（Vue 組件通信）

• 使用 kebab-case，在子組件中 $emit 時(shí)使用：

this.$emit('update:loading', false);

• 在父組件中監(jiān)聽(tīng)：

<template>
  <ChildComponent @update:loading="handleLoadingChange" />
</template>

八、自定義指令命名規(guī)范

• 使用 kebab-case，符合 HTML 規(guī)范。

app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

使用方式：

<input v-focus />

九、樣式類(lèi)命名建議（可選）

• 推薦使用 BEM 風(fēng)格或 CSS-in-JS 工具。
• 如果使用 SCSS/CSS，建議命名清晰：

.user-card {}
.user-card__header {}
.user-card--active {}

十、模塊化命名建議

如果你的項(xiàng)目采用模塊化結(jié)構(gòu)（如多個(gè) store、路由模塊、功能模塊），建議在命名中加入上下文前綴。

示例：

十一、附錄：命名風(fēng)格總結(jié)表

十二、工具建議（可選）

• 使用 ESLint 和 Prettier 來(lái)自動(dòng)格式化和校驗(yàn)命名風(fēng)格。
• 使用 Vue Language Features (Volar) 提升 Vue 開(kāi)發(fā)體驗(yàn)。
• 使用 TypeScript 增強(qiáng)類(lèi)型安全和命名一致性。

總結(jié)

一個(gè)良好的命名規(guī)范能顯著提升代碼質(zhì)量與團(tuán)隊(duì)協(xié)作效率。建議將此文檔納入項(xiàng)目初期的技術(shù)規(guī)范文檔，并結(jié)合 ESLint/Prettier 工具進(jìn)行自動(dòng)化檢查。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論