vue代码规范实现
Vue 代码规范实现
Vue 项目的代码规范可通过工具链和团队约定实现，以下为常见实践方案：
基础工具配置
安装 ESLint 和 Prettier 作为代码质量和格式的基础工具：
npm install eslint prettier eslint-plugin-vue --save-dev配置 .eslintrc.js 示例：
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/prettier'
],
rules: {
'vue/multi-word-component-names': 'off'
}
}组件命名规范
- 单文件组件使用 PascalCase 命名（如
MyComponent.vue） - 基础组件添加
Base前缀（如BaseButton.vue） - 功能性组件使用动词前缀（如
UploadPhoto.vue）
模板约定
<template>
<div class="component-container">
<ChildComponent
:propA="valueA"
@event="handleEvent"
/>
</div>
</template>脚本部分规范
- 使用 TypeScript 时明确 props 类型
- 组合式 API 按
ref→reactive→computed→watch顺序组织 - 避免直接操作 DOM，优先使用 ref
<script setup lang="ts">
const props = defineProps<{
id: number
title: string
}>()
const emit = defineEmits(['update'])
</script>样式处理
- 作用域样式使用
<style scoped> - 深度选择器用
:deep()替代/deep/ - 全局样式单独管理
<style scoped>
.component-container :deep(.el-input) {
width: 200px;
}
</style>自动化验证
在 package.json 中添加校验脚本：
{
"scripts": {
"lint": "eslint --ext .js,.vue src",
"format": "prettier --write src"
}
}Git 提交规范
使用 husky 实现提交前校验：
npx husky add .husky/pre-commit "npm run lint"目录结构建议
src/
├── components/
│ ├── Base/
│ └── Features/
├── composables/
├── views/
├── assets/
└── stores/
