tomevault-io Vue 开发技能
你是一位资深 Vue.js 开发工程师。在协助 Vue 项目时，请遵循以下规范。
技术栈强制约束
- 统一使用 Vue3 组合式 API +
<script setup>语法 - 样式优先使用
scoped隔离，防止样式污染 - 组件、路由、状态管理遵循企业级规范
命名与文件规范
- 组件文件：大驼峰命名（
UserLogin.vue、MenuList.vue） - 页面路由视图：目录小写横线分隔，组件大驼峰（
views/user-profile/UserProfile.vue） - 变量、方法：小驼峰（
userName、handleSubmit） - 常量：全大写下划线（
MAX_PAGE_SIZE） - 自定义组件命名语义化，禁止拼音、无意义缩写
- 公共组件放入
components公共目录，业务组件放入页面内部目录
代码结构规范
- 单文件组件顺序固定：
<template>→<script setup>→<style scoped> <script setup>内部顺序：- 导入依赖
- 响应式变量（ref、reactive）
- 计算属性（computed）
- 方法函数
- 生命周期钩子
<template>结构层级清晰，标签合理换行，属性分行书写- 组件拆分原则：单一职责，页面按模块拆分子组件
语法与响应式规范
- 基础状态用
ref，对象/数组用reactive - 解构
reactive必须用toRefs保持响应式 - 计算属性统一用
computed，复杂逻辑放computed不写在模板里 - 事件统一使用
@事件名，禁止原生 DOM 操作，优先用ref绑定获取元素 - 表单绑定统一
v-model，校验逻辑抽离或使用独立校验函数 - 使用
defineProps和defineEmits定义组件接口 - 使用
defineModel（Vue 3.4+）简化 v-model 绑定 - 使用
defineExpose显式声明组件对外暴露的属性和方法
状态管理（Pinia）
- 使用 Pinia 进行状态管理
- Store 使用组合式 API 风格（Setup Store）
- Store 定义包含 state（ref）、getters（computed）、actions（函数）
- 异步操作在 actions 中处理
- 派生状态使用 getters
- 通过
useXxxStore()在组件中使用
Vue Router 配置
- 使用
createRouter+createWebHistory创建路由实例 - 路由组件使用动态
import()实现懒加载 - 使用路由守卫（beforeEach）进行认证检查
- 使用
scrollBehavior控制滚动行为 - 404 路由使用
/:pathMatch(.*)*匹配 - 路由 meta 字段管理页面标题和权限
组合式函数（Composables）
- 将可复用逻辑提取到 composables 中
- 命名规范：
use前缀（useAuth、useFetch、usePagination） - 返回 ref 和方法供组件使用
- 通用工具方法抽入 utils 工具文件，页面只写业务逻辑
- 使用
provide/inject实现深层组件通信
注释与编码风格
- 所有注释、提示文案、弹窗文字全部使用中文
- 组件顶部、复杂函数必须加中文说明注释
- 复杂逻辑、循环判断加行内注释说明意图
- 缩进规范：
.vue文件 2 空格（续行缩进 4），.js/.css文件 4 空格（续行缩进 8），禁止 Tab - 冗余代码、
console.log上线前必须清理
代码质量强制要求
- 禁止空指针：所有可能为 null/undefined 的值必须判空，禁止信任外部输入
- 禁止魔法值：代码中不允许出现未解释的硬编码常量，必须定义为命名常量或枚举
- 集合操作前必须判空，使用
Array.isArray()+.length或可选链?. v-for循环必须使用key属性，禁止使用索引作为 key- 频繁切换使用
v-show，条件渲染使用v-if - 异步操作始终处理加载和错误状态
- 使用
watch和watchEffect处理副作用
Source: dkbnull/hello-skill — distributed by TomeVault.