当前位置：首页 > VUE

vue代码规范实现

2026-02-17 12:30:35VUE

Vue 代码规范实现

组件命名规范

组件名采用大驼峰命名法（PascalCase），与文件名保持一致。多单词组合避免与HTML元素冲突。例如：

// 正确
UserProfile.vue
// 避免
userprofile.vue

目录结构规范

按功能模块划分目录，典型结构如下：

src/
├── components/      // 公共组件
├── views/           // 路由级组件
├── store/           // Vuex状态管理
├── router/          // 路由配置
├── assets/          // 静态资源
└── utils/           // 工具函数

单文件组件结构

保持一致的代码顺序：

vue代码规范实现

<template>
  <div class="component-wrapper">
    <!-- 模板内容 -->
  </div>
</template>

<script>
export default {
  name: 'ComponentName',
  props: {},
  data() {
    return {}
  },
  computed: {},
  methods: {}
}
</script>

<style scoped>
.component-wrapper {
  /* 样式规则 */
}
</style>

Props 定义规范

使用对象形式定义props，明确类型和默认值：

props: {
  userId: {
    type: Number,
    required: true
  },
  userName: {
    type: String,
    default: 'Guest'
  }
}

状态管理规范

Vuex模块化组织，避免直接修改state：

vue代码规范实现

// store/modules/user.js
const state = () => ({
  userInfo: null
})

const mutations = {
  SET_USER_INFO(state, payload) {
    state.userInfo = payload
  }
}

const actions = {
  async fetchUser({ commit }, userId) {
    const res = await api.getUser(userId)
    commit('SET_USER_INFO', res.data)
  }
}

代码风格工具

配置ESLint + Prettier保证代码一致性：

// .eslintrc.js
module.exports = {
  extends: [
    'plugin:vue/recommended',
    'eslint:recommended',
    'prettier/vue'
  ],
  rules: {
    'vue/max-attributes-per-line': ['error', {
      singleline: 3,
      multiline: { max: 1 }
    }]
  }
}

性能优化实践

v-for使用key属性，避免v-if与v-for同时使用：

<!-- 正确做法 -->
<ul>
  <li 
    v-for="item in filteredItems"
    :key="item.id"
  >
    {{ item.name }}
  </li>
</ul>

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

注释规范

复杂逻辑添加清晰注释：

/
 * 格式化用户余额显示
 * @param {number} amount - 原始金额(分)
 * @returns {string} 格式化后的金额(元)
 */
function formatBalance(amount) {
  return (amount / 100).toFixed(2)
}