vue代码规范实现
Vue 代码规范实现
组件命名规范
组件名采用大驼峰命名法（PascalCase），与文件名保持一致。多单词组合避免与HTML元素冲突。例如：
// 正确
UserProfile.vue
// 避免
userprofile.vue目录结构规范
按功能模块划分目录，典型结构如下：
src/
├── components/ // 公共组件
├── views/ // 路由级组件
├── store/ // Vuex状态管理
├── router/ // 路由配置
├── assets/ // 静态资源
└── utils/ // 工具函数单文件组件结构
保持一致的代码顺序：
<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：
// 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)
}
