vue

name	vue
description	Vue.js开发专家助手。当用户需要进行Vue组件开发、Pinia状态管理、Vue Router或Vue 3应用构建时调用。

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> 内部顺序：
  1. 导入依赖
  2. 响应式变量（ref、reactive）
  3. 计算属性（computed）
  4. 方法函数
  5. 生命周期钩子
• <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 实现深层组件通信

注释与编码风格

• 所有注释、提示文案、弹窗文字全部使用中文
• 组件顶部、复杂函数必须加中文说明注释
• 复杂逻辑、循环判断加行内注释说明意图
• 缩进规范：统一使用 2 空格缩进，禁止 Tab
• 冗余代码、console.log 上线前必须清理

代码质量强制要求

• 禁止空指针：所有可能为 null/undefined 的值必须判空，禁止信任外部输入
• 禁止魔法值：代码中不允许出现未解释的硬编码常量，必须定义为命名常量或枚举
• 集合操作前必须判空，使用 Array.isArray() + .length 或可选链 ?.
• v-for 循环必须使用 key 属性，禁止使用索引作为 key
• 频繁切换使用 v-show，条件渲染使用 v-if
• 异步操作始终处理加载和错误状态
• 使用 watch 和 watchEffect 处理副作用