# Vue3 Vite TS Generator

> 技能说明

- Skill: `ssqcookies/vue3-vite-ts-generator` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ssqcookies/vue3-vite-ts-generator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ssqcookies/vue3-vite-ts-generator/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: ssqcookies (https://skillmd.com/u/ssqcookies)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/ssqcookies/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 初始模板

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

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

<style scoped></style>
```