vue 代码规范 实现

Vue 代码规范实现

项目结构与文件命名

采用模块化组织方式，保持目录结构清晰。组件文件使用大驼峰命名（如 UserList.vue），非组件文件使用小写短横线命名（如 api-request.js）。

src/
├── components/
│   ├── BaseButton.vue
│   └── UserList/
│       ├── UserListItem.vue
│       └── index.js
├── views/
│   ├── HomeView.vue
│   └── UserDetailView.vue

组件规范

单文件组件采用 <template>, <script>, <style> 顺序。组件名称必须始终为多单词，避免与 HTML 元素冲突。

<template>
  <div class="user-card">
    <span>{{ user.name }}</span>
  </div>
</template>

<script>
export default {
  name: 'UserCard',
  props: {
    user: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
.user-card {
  padding: 1rem;
}
</style>

Props 定义

始终使用对象形式声明 props，指定类型和验证规则。Boolean 类型的 prop 需要显式默认值。

props: {
  status: {
    type: String,
    validator: value => ['active', 'pending', 'inactive'].includes(value)
  },
  disabled: {
    type: Boolean,
    default: false
  }
}

状态管理

优先使用 Vuex 进行全局状态管理，模块化组织 store。Mutation 类型使用常量命名。

// store/modules/user.js
const SET_USER = 'SET_USER'

export default {
  state: () => ({
    currentUser: null
  }),
  mutations: {
    [SET_USER](state, payload) {
      state.currentUser = payload
    }
  },
  actions: {
    fetchUser({ commit }, userId) {
      return api.getUser(userId).then(user => {
        commit(SET_USER, user)
      })
    }
  }
}

代码风格

配置 ESLint 和 Prettier 保证代码一致性。推荐规则：

// .eslintrc.js
module.exports = {
  rules: {
    'vue/multi-word-component-names': 'error',
    'vue/require-default-prop': 'warn',
    'vue/component-tags-order': ['error', {
      order: ['template', 'script', 'style']
    }]
  }
}

性能优化

大型列表使用 v-for 时必须配合 :key。避免在模板中使用复杂表达式，优先使用计算属性。

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

<script>
export default {
  computed: {
    filteredItems() {
      return this.items.filter(item => item.isActive)
    }
  }
}
</script>

组合式 API 规范

使用 setup() 时遵循逻辑关注点分离，相关功能代码组织在一起。使用 ref 和 reactive 时保持一致性。

import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)

    function increment() {
      count.value++
    }

    onMounted(() => {
      console.log('Component mounted')
    })

    return {
      count,
      doubleCount,
      increment
    }
  }
}