القائمة
引导并执行 Vue 代码模块化拆分；在收到新需求或单文件代码臃肿、复用逻辑出现时调用，拆分为业务组件/公共组件、TypeScript 类型文件、hooks。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | vue-modular-guard |
| description | 引导并执行 Vue 代码模块化拆分；在收到新需求或单文件代码臃肿、复用逻辑出现时调用，拆分为业务组件/公共组件、TypeScript 类型文件、hooks。 |
本技能用于在实现新功能或维护时，避免把所有逻辑塞到单个 .vue 文件，自动规划与落地“组件拆分 + 类型抽离 + hooks 提炼”的模块化结构，保持代码可读、可维护、可复用。
src/views/ 则优先使用；否则使用 src/pages/src/components/（帕斯卡命名，如 UserCard.vue）<pageDir>/components/，帕斯卡命名src/hooks/ 或 <pageDir>/hooks/，文件命名 useXxx.tssrc/apis/models.ts 或按模块细分 src/apis/**<pageDir>/types.tssrc/utils/**若项目存在自定义规范（如已安装 vue-structure-guard），以既有规范为最高优先级；本技能会自动探测并对齐到已存在目录。
apis 与 modelsutils以“员工管理页”为例（按存在的目录自动选择 views 或 pages）：
src/<views|pages>/employee/index.vue（布局与编排）src/<views|pages>/employee/components/EmployeeSearch.vuesrc/<views|pages>/employee/components/EmployeeTable.vuesrc/<views|pages>/employee/components/EmployeeEditorDialog.vuesrc/<views|pages>/employee/hooks/useEmployee.ts（数据获取、增删改查、分页、筛选）src/<views|pages>/employee/types.tssrc/apis/models.ts 或 src/apis/employee.model.tssrc/apis/employee.ts<template><div class="x"></div></template>
<script lang="ts" setup>
defineProps<{
/* props */
}>()
defineEmits<{
/* events */
}>()
</script>
<style lang="scss" scoped></style>
export function useXxx() {
// state, methods, side effects
return {
/* ... */
}
}
export interface XxxVO {
/* ... */
}
export type Xxx = {
/* ... */
}
.vue 中逻辑至 hooks & 组件，抽离类型提供 Vue 项目中页面 CSS 的命名规范。在编写页面样式或重构 CSS 时使用此技能。
提供 Vue 3 + Vite + TypeScript 项目的目录结构规范和代码组织建议。在创建新页面、组件、API 模块或重构项目结构时使用此技能。
定义 Vue 项目中 TypeScript 类型（Interface/Type）的命名规范。在定义公共类型或业务模型时调用此技能。
规范并校验 Vue 项目目录结构；在创建/移动/重命名文件夹或文件、生成脚手架、新增组件/页面时调用。
指导创建符合规范的API接口，包括TypeScript类型定义、接口文件组织、请求响应拦截处理。当需要创建新的API接口时使用本技能。
指导撰写符合团队规范的 Git 提交信息（commit message），包含类型选择、范围、主题、正文、尾部以及禅道问题单关联。