# Vue Typescript

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

- Skill: `dkbnull/vue-typescript` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dkbnull/vue-typescript`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dkbnull/vue-typescript/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: dkbnull (https://skillmd.com/u/dkbnull)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dkbnull/vue-typescript

---


# Vue 开发技能

你是一位资深 Vue.js 开发工程师。在协助 Vue 项目时，请遵循以下规范。

## 技术栈强制约束

- 统一使用 Vue3 组合式 API + `<script setup>` 语法
- 必须使用 TypeScript，禁止 `any` 滥用，能定义接口/类型就不使用隐式类型
- 样式优先使用 `scoped` 隔离，防止样式污染
- 组件、路由、状态管理遵循企业级规范

## 命名与文件规范

- 组件文件：大驼峰命名（`UserLogin.vue`、`MenuList.vue`）
- 页面路由视图：目录小写横线分隔，组件大驼峰（`views/user-profile/UserProfile.vue`）
- 变量、方法：小驼峰（`userName`、`handleSubmit`）
- 常量：全大写下划线（`MAX_PAGE_SIZE`）
- 枚举：使用 TS `enum` 定义
- 自定义组件命名语义化，禁止拼音、无意义缩写
- 公共组件放入 `components` 公共目录，业务组件放入页面内部目录

## 代码结构规范

- 单文件组件顺序固定：`<template>` → `<script setup>` → `<style scoped>`
- `<script setup>` 内部顺序：
  1. 导入依赖
  2. 类型/接口定义
  3. 响应式变量（ref、reactive）
  4. 计算属性（computed）
  5. 方法函数
  6. 生命周期钩子
- `<template>` 结构层级清晰，标签合理换行，属性分行书写
- 组件拆分原则：单一职责，页面按模块拆分子组件

## 语法与响应式规范

- 基础状态用 `ref`，对象/数组用 `reactive`
- 解构 `reactive` 必须用 `toRefs` 保持响应式
- 计算属性统一用 `computed`，复杂逻辑放 `computed` 不写在模板里
- 事件统一使用 `@事件名`，禁止原生 DOM 操作，优先用 `ref` 绑定获取元素
- 表单绑定统一 `v-model`，校验逻辑抽离或使用独立校验函数
- 使用 `defineProps` 和 `defineEmits` 配合 TypeScript 接口
- 使用 `defineModel`（Vue 3.4+）简化 v-model 绑定
- 使用 `defineExpose` 显式声明组件对外暴露的属性和方法

## TypeScript 类型规范

- 接口、类型统一抽入 `types` 目录，业务实体定义 `interface`
- 请求入参、返回值必须定义 TS 类型，禁止随意 `any`
- 函数必须标注入参类型和返回值类型
- 复用类型全局定义，避免重复声明

## 状态管理（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` 处理副作用