Vue3代码风格最佳实践指南

Vue3项目开发需要遵循规范的目录结构和代码风格，本文将详细介绍从文件组织到组件编写的完整实践指南。 目录结构 my-vue3-project/ ├── src/ │ ├── assets/ # 静态资源（图片、字体等） │ ├── components/ │ │ ├── common/ # 通用UI组件（跨项目复用，无业务逻辑） │ │ │ └── BaseButton.vue │ │ └── biz/ # 通用业务组件（跨页面复用，含业务逻辑） │ │ └── BizUserCard.vue │ ├── composables/ # 组合式函数（可复用的状态逻辑） │ │ └── useUser.ts │ ├── layouts/ # 布局组件（页面整体结构） │ │ ├── default.vue │ │ └── components/ # 布局专用组件（仅布局层使用） │ │ └── AppHeader.vue │ ├── pages/ # 页面组件（路由对应，kebab-case命名） │ │ ├── user-profile.vue │ │ └── user/ # 页面模块 │ │ ├── list.vue │ │ └── components/ # 页面专用组件（仅当前模块使用） │ │ └── UserFilter.vue │ ├── router/ # 路由配置（管理页面路由） │ │ ├── index.ts │ │ └── user-routes.ts │ ├── stores/ # Pinia状态管理（全局共享状态） │ │ └── userStore.ts │ ├── services/ # API服务层（封装后端接口调用） │ │ └── userService.ts │ ├── utils/ # 工具函数（纯函数，无副作用） │ │ ├── formatDate.ts │ │ └── validateEmail.ts │ ├── types/ # TypeScript类型定义（接口、枚举等） │ │ ├── User.ts │ │ └── api.ts │ ├── styles/ # 全局样式（变量、混入、重置样式） │ │ └── global.scss │ ├── App.vue │ └── main.ts ├── tests/ │ └── unit/ # 单元测试（与src目录结构对应） │ ├── components/ │ └── utils/ └── package.json 文件命名规则 类型规则示例说明通用UI组件Base + PascalCaseBaseButton.vue无业务逻辑，纯UI通用业务组件Biz + PascalCaseBizUserCard.vue跨页面复用，含业务布局组件App + PascalCaseAppHeader.vue仅布局层使用页面文件kebab-caseuser-profile.vue与路由路径一致页面专用组件PascalCaseUserFilter.vue仅当前模块使用组合式函数use + camelCaseuseUser.ts逻辑复用StorecamelCase + StoreuserStore.ts全局状态ServicecamelCase + ServiceuserService.tsAPI封装工具函数camelCaseformatDate.ts纯函数类型定义PascalCaseUser.ts接口/枚举测试文件源文件名 + .spec.tsBaseButton.spec.ts单元测试 组件编写 组件分类与命名 组件类型目录命名规则示例通用UI组件components/common/Base + PascalCaseBaseButton.vue通用业务组件components/biz/Biz + PascalCaseBizUserCard.vue布局组件layouts/components/App + PascalCaseAppHeader.vue页面专用组件pages/xxx/components/PascalCaseUserFilter.vue 单文件组件结构 // 1. 类型导入 import type { UserInfo } from '@/types/User'// 2. 第三方库 import { ElMessage } from 'element-plus'// 3. 组件导入 import BaseButton from '@/components/common/BaseButton.vue'// 4. 工具/组合式函数 import { useUser } from '@/composables/useUser'// 5. Props interface Props { userId: string title?: string } const props = withDefaults(defineProps(), { title: '默认' })// 6. Emits const emit = defineEmits