Vue3 Vite TS Generator

技能说明

本技能职责：搭建标准目录骨架 + 生成极简占位文件 ⚠️ 重要边界：只构建目录结构，所有文件仅保留基础空白模板，不写入vue-router、pinia、axios等第三方依赖导入代码，避免依赖未安装时VSCode出现大量TS红色报错。 提供两种工作模式：

1. 全新模式：空目录从零初始化整套 Vue3 + Vite + TypeScript 标准前端项目骨架
2. 补齐模式：当前目录已经存在Vite+Vue脚手架（create-vue生成），仅校验、补齐src内部规范目录，不改动根目录已有配置文件

项目拥有固定标准目录约束，所有文件夹层级、预设文件命名不可随意增删、扁平化、改名。

目录约束规则（执行时以此作为校验标准）

顶层目录约束

标准顶层包含：public、src；配套 vite+ts+代码规范相关配置文件。

src 内部强制分层标准

1. assets：拆分 images / styles 子目录，存放静态资源
2. components：公共组件，内置 tests 测试目录
3. config：项目全局配置，入口 index.ts
4. hooks：组合式hooks存放目录
5. router：路由模块，入口 index.ts
6. services：接口服务层，预设 apps.ts、datasets.ts
7. stores：Pinia状态模块，预设 account.ts、auth.ts
8. utils：通用工具，内置 auth.ts、request.ts、storage.ts
9. views：页面层 - layouts：布局容器 DefaultLayout.vue / BlankLayout.vue - pages：首页页面 HomeView.vue - auth：登录相关页面 LoginView.vue src根目录必须存在 App.vue、main.ts

根目录标准配套文件清单

env.d.ts、index.html、package.json、README.md .eslintrc.cjs / eslint.config.ts、.gitignore、.editorconfig、.prettierrc.json tsconfig系列配置文件、vite.config.ts

补齐模式下：根目录已有文件一律保留，不做覆盖、重写。

强制执行流程（必须严格遵守，不可省略步骤）

第1步：环境探测

扫描当前工作目录，自动区分两种场景：

• 场景A【全新空目录】：不存在 package.json / src / vite.config.ts
• 场景B【存量脚手架】：存在 package.json + vite.config.ts + src（create-vue 初始化产物）

第2步：预览输出（禁止任何文件写入）

• 场景A：输出完整目标目录树清单
• 场景B：输出目录对比清单，区分：✅已存在 / ⚠缺失 / ❌规范外多余目录

第3步：等待用户确认

明确告知即将执行的模式，询问用户确认：

是否确认执行【全新初始化 / 存量目录补齐】操作？

第4步：分支执行

1. 全新模式 逐级创建全部目录，生成极简占位模板代码，所有第三方相关导入统一注释预留，不启用。

2. 存量补齐模式（重点约束） ① 根目录所有配置文件只读、绝不覆盖 ② 只创建src下缺失文件夹与缺失规范文件 ③ 已存在src内文件保持原样，不覆写业务代码 ④ 若现有目录结构和规范冲突，列出改造建议，不自动修改

占位文件统一编码规范

1. 业务源码全部使用 TypeScript，禁止普通 .js
2. Vue SFC 统一采用 <script setup lang="ts">
3. 页面组件命名规范：XxxView.vue（大驼峰）
4. 硬性规则：初次生成禁止直接导入外部依赖
   • vue-router、pinia、axios相关代码全部注释占位
   • 示例参考 App.vue 初始模板

<script setup lang="ts">
  // 依赖安装完成后再取消注释
  // import { RouterView } from 'vue-router'
</script>

<template>
  <!-- <RouterView /> -->
</template>

<style scoped></style>