陌讯skills聚合平台

vite-starter

📁 cruldra/skills 📅 1 day ago
3
总安装量
2
周安装量
#57872
全站排名
安装命令
npx skills add https://github.com/cruldra/skills --skill vite-starter

Agent 安装分布

cline 2
gemini-cli 2
github-copilot 2
codex 2
kimi-cli 2
cursor 2

Skill 文档

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

报告内容包括：

  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）

参考资源

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台
本页面由 陌讯 Skills 聚合平台 收录整理，数据定期更新。