Vite 前端项目脚手架

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

工作流程

第 1 步：收集用户偏好

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

偏好收集原则：

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

推荐组合：

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：

各包管理器命令：

# 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 步：向用户报告

报告内容包括：

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

# 启动开发服务器
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 官方文档
• create-vite 模板列表
• Awesome Vite 社区模板