Vite 前端项目脚手架

使用 create-vite 快速创建现代前端项目，支持官方模板和社区模板，自动处理 TypeScript 配置验证。

工作流程

第 1 步：收集用户偏好

必须询问以下信息（如果用户未提供）：

偏好项	选项	说明
框架	React、Vue、Svelte、Solid、Preact、Lit、Qwik、Vanilla	核心框架选择
语言	TypeScript（推荐）、JavaScript	是否启用 TypeScript
包管理器	pnpm（推荐）、npm、yarn、bun	依赖管理工具
项目名称	字符串	目录名，可用 `.` 表示当前目录
构建器	React 专属：Babel（默认）或 SWC（大型项目推荐）	仅 React 项目需要选择

偏好收集原则：

如果用户已在请求中明确了某些偏好，无需重复询问
对于缺失的关键偏好，一次性列出所有问题，避免多轮对话
如果用户没有特殊要求，可直接提议推荐组合并请求确认

推荐组合：

React + TypeScript + pnpm + SWC → react-swc-ts 模板（性能最佳）
Vue + TypeScript + pnpm         → vue-ts 模板
Svelte + TypeScript + pnpm      → svelte-ts 模板

第 2 步：保存偏好到 assets 目录

将用户偏好保存为 JSON 文件，便于下次复用。

存储位置： ./assets/ 目录（相对于技能目录）

文件命名规则： {描述性名称}.json，例如 react-ts-pnpm.json

文件格式：

{
  "name": "react-ts-pnpm",
  "description": "React + TypeScript + pnpm + SWC",
  "framework": "react",
  "language": "typescript",
  "packageManager": "pnpm",
  "template": "react-swc-ts",
  "createdAt": "2024-01-01"
}

下次使用时： 列出 ./assets/ 中已有的偏好文件，让用户选择直接复用或创建新的。

第 3 步：选择并执行安装命令

官方模板（推荐，快速稳定）

所有官方模板 ID：

模板 ID	框架	语言	备注
`vanilla`	Vanilla JS	JavaScript
`vanilla-ts`	Vanilla JS	TypeScript
`vue`	Vue 3	JavaScript
`vue-ts`	Vue 3	TypeScript
`react`	React	JavaScript	Babel
`react-ts`	React	TypeScript	Babel
`react-swc`	React	JavaScript	SWC（更快）
`react-swc-ts`	React	TypeScript	SWC（更快，推荐）
`react-compiler`	React	JavaScript	React Compiler（实验性）
`react-compiler-ts`	React	TypeScript	React Compiler（实验性）
`preact`	Preact	JavaScript
`preact-ts`	Preact	TypeScript
`lit`	Lit	JavaScript	Web Components
`lit-ts`	Lit	TypeScript	Web Components
`svelte`	Svelte	JavaScript
`svelte-ts`	Svelte	TypeScript
`solid`	Solid	JavaScript
`solid-ts`	Solid	TypeScript
`qwik`	Qwik	JavaScript	Resumability
`qwik-ts`	Qwik	TypeScript	Resumability

各包管理器命令：

# pnpm（推荐）
pnpm create vite <项目名称> --template <模板ID>

# npm（注意：npm 7+ 需要 -- 分隔符）
npm create vite@latest <项目名称> -- --template <模板ID>

# yarn
yarn create vite <项目名称> --template <模板ID>

# bun
bun create vite <项目名称> --template <模板ID>

在当前目录创建（使用 .）：

pnpm create vite . --template react-swc-ts

非交互式（CI/CD 或脚本环境）：

pnpm create vite my-app --template react-swc-ts --no-interactive

社区模板（功能更完整）

参考 Awesome Vite 社区模板获取完整列表。

使用 tiged（degit 的维护版本）克隆社区模板：

# 安装 tiged
npx tiged <用户名/仓库名> <项目名称>
cd <项目名称>
pnpm install

热门社区模板：

Vitesse — Vue 3 全功能模板（UnoCSS + i18n + 文件路由）
Vitamin — React + TypeScript + Tailwind CSS + PWA
create-electron-vite — Electron 桌面应用

第 4 步：安装依赖

cd <项目名称>   # 如果不是在当前目录创建
pnpm install    # 或对应包管理器的安装命令

第 5 步：TypeScript 编译验证（仅 TS 项目）

如果选择了 TypeScript 模板，必须验证编译通过：

# 执行类型检查（不生成文件）
pnpm exec tsc --noEmit

# 或运行构建验证
pnpm build

预期输出： 无错误输出，命令以退出码 0 完成。

如果出现类型错误，根据错误信息修复后再次验证，确认干净通过后再向用户报告完成。

第 6 步：向用户报告

报告内容包括：

项目创建路径
使用的模板和包管理器
TypeScript 编译验证结果（如适用）
启动开发服务器的命令

# 启动开发服务器
pnpm dev

注意事项

SWC vs Babel：对于 React 项目，SWC（react-swc-ts）比 Babel 快 20x+，推荐用于所有新项目
npm 7+ 特殊语法：npm 传递参数给 create-vite 必须加 -- 分隔符：npm create vite@latest my-app -- --template react-ts
在线预览：可通过 https://vite.new/{模板ID} 在浏览器中快速预览任意官方模板（如 https://vite.new/react-swc-ts）

vite-starter