vue 代码规范 实现
Vue 代码规范实现方法
组件命名规范
组件名应为多个单词组合（避免与HTML元素冲突），采用大驼峰命名（PascalCase）或短横线分隔命名（kebab-case）。单文件组件文件名建议用大驼峰，例如 MyComponent.vue。
模板结构
模板中标签顺序推荐：<template> → <script> → <style>。避免在模板中使用复杂表达式，复杂逻辑应移至计算属性或方法中。
Props 定义
Props 需明确类型和默认值，使用对象形式定义。命名采用小驼峰（camelCase），模板中转换为短横线分隔：
props: {
userName: {
type: String,
required: true
},
maxCount: {
type: Number,
default: 10
}
}状态管理
复杂状态应使用 Vuex 或 Pinia。组件内数据用 data() 返回对象，避免直接修改 props，需通过事件通知父组件。
方法定义
方法名使用小驼峰，按功能分组注释。事件处理方法以 handle 前缀命名，例如 handleSubmit。
样式作用域
组件样式添加 scoped 属性避免污染全局。深度选择器用 :deep()（Vue 3）或 >>>（Vue 2）。
代码组织示例
<template>
<div class="user-card">
<h3>{{ fullName }}</h3>
<button @click="handleEdit">Edit</button>
</div>
</template>
<script>
export default {
name: 'UserCard',
props: {
firstName: String,
lastName: String
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
}
},
methods: {
handleEdit() {
this.$emit('edit-user');
}
}
};
</script>
<style scoped>
.user-card {
border: 1px solid #eee;
}
</style>工具集成
- 使用 ESLint 配置
eslint-plugin-vue - 添加 Prettier 统一代码格式
- 通过 VSCode 插件实现保存自动格式化
目录结构建议
src/
├── components/
│ ├── BaseButton.vue # 基础组件
│ └── User/
│ └── UserCard.vue # 业务组件
├── stores/ # 状态管理
└── views/ # 路由组件TypeScript 支持
Vue 3 推荐使用 <script setup lang="ts"> 语法，为 props 和 emits 提供类型定义：
defineProps<{
id: number;
title: string;
}>();
