一些基本的 Vue 规范

一、项目结构规范

推荐的目录结构

src/
├── assets/         # 静态资源（如图片、字体）
├── components/     # 全局组件
├── views/          # 页面组件（用于路由）
├── router/         # 路由配置
├── store/          # Vuex 状态管理
├── composables/    # 封装的可复用逻辑（Vue 3）
├── services/       # 接口请求逻辑
├── utils/          # 工具函数
├── App.vue         # 根组件
├── main.js         # 入口文件

二、组件命名规范

文件命名

• 组件文件使用 PascalCase（大驼峰命名）或 kebab-case（短横线连接）：
  • ✅ MyComponent.vue
  • ✅ my-component.vue
  • ❌ myComponent.vue

组件命名

• 组件的 name 属性使用 PascalCase：

  <script>
  export default {
    name: 'MyComponent'
  }
  </script>
  

组件注册

• 本地组件使用驼峰命名或短横线均可，但保持一致。
• 全局组件建议使用 Base 前缀（如：BaseButton）表示通用组件。

三、模板规范（template）

模板结构顺序

组件结构推荐顺序为：

<template>
</template>

<script>
</script>

<style scoped>
</style>

使用简洁语法

• 使用 v-bind: 简写：

  :src="imageUrl" 代替 v-bind:src
  

• 使用 v-on: 简写：

  @click="handleClick" 代替 v-on:click
  

属性顺序

推荐顺序（Vue 官方 Style Guide）：

1. v-if / v-for / v-show
2. ref / key / slot
3. class / style
4. v-model
5. 事件 @click
6. 其他自定义属性

四、脚本规范（script）

Composition API（Vue 3）推荐使用

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

Options API（Vue 2 / Vue 3兼容）

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

方法命名

• 方法应使用动词开头，表意明确：
  • ✅ fetchUserInfo
  • ✅ handleClick
  • ❌ data1

五、样式规范（style）

使用 scoped 避免样式污染

<style scoped>
.button {
  color: red;
}
</style>

命名规范

• 使用 BEM 命名规范：

  .card {}
  .card__title {}
  .card--active {}
  

六、代码风格规范

Vue 官方推荐使用 ESLint + Prettier 来规范代码风格，常见配置有：

• eslint-plugin-vue
• @vue/eslint-config-prettier

示例 .eslintrc.js:

module.exports = {
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/prettier'
  ]
}

七、其他推荐规范

单文件组件长度

• 一个 .vue 文件控制在合理行数（如 200 行以内）。
• 逻辑复杂的可以拆分为多个组件或组合函数（composables）。

路由命名规范

• 路由 name 建议与页面组件名一致，便于跳转维护。

使用 defineProps 和 defineEmits（Vue 3）

<script setup>
const props = defineProps(['title'])
const emit = defineEmits(['submit'])
</script>