在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

vitejs/vite

菜单

框架模板

相关源文件

本文档介绍了 create-vite 系统提供的框架模板。这些模板是新项目的起点，为流行的前端框架和库提供了预配置的设置。每个模板都包含必要的依赖项、构建脚本和基本项目结构，以便开发人员能够快速上手。

有关 create-vite CLI 工具本身的信息，请参阅 Create-Vite 工具。有关更广泛的项目脚手架概念，请参阅 项目脚手架。

模板概述

create-vite 系统在 7 个不同的框架中提供了 14 个不同的模板，大多数框架都有 JavaScript 和 TypeScript 版本。每个模板都位于 packages/create-vite/ 目录下，命名约定为 template-{framework} 或 template-{framework}-ts。

模板分类

来源：packages/create-vite/template-react/package.json1-29 packages/create-vite/template-react-ts/package.json1-30 packages/create-vite/template-vue/package.json1-19 packages/create-vite/template-vue-ts/package.json1-22 packages/create-vite/template-svelte/package.json1-17 packages/create-vite/template-svelte-ts/package.json1-21

模板分类

React 模板

React 模板提供现代化的 React 开发环境，支持最新的 React 19+ 和全面的工具链。

template-react

  • React 19.1.0 和 React DOM
  • @vitejs/plugin-react 用于快速刷新和 JSX 转换
  • ESLint 配置，包含 React 特定规则
  • 现代化的 ESLint flat config 设置

template-react-ts

  • JavaScript 版本的全部特性
  • TypeScript 5.8+ 配置
  • React 和 React DOM 的类型定义
  • TypeScript-ESLint 集成

来源：packages/create-vite/template-react/package.json12-26 packages/create-vite/template-react-ts/package.json12-28

Vue 模板

Vue 模板使用 Vue 3.5+ 和官方 Vite 插件来支持单文件组件。

template-vue

  • Vue 3.5.14 核心框架
  • @vitejs/plugin-vue 用于 SFC 编译
  • 最小化设置，专注于 Vue 核心功能

template-vue-ts

  • TypeScript 集成，使用 vue-tsc 编译器
  • @vue/tsconfig 用于推荐的 TypeScript 配置
  • 类型安全的 Vue 开发环境

来源：packages/create-vite/template-vue/package.json11-17 packages/create-vite/template-vue-ts/package.json11-20

Svelte 模板

Svelte 模板使用 Svelte 5+ 和全面的工具链进行组件开发。

template-svelte

  • Svelte 5.33.2 框架
  • @sveltejs/vite-plugin-svelte 用于编译
  • Svelte 应用程序的精简设置

template-svelte-ts

  • TypeScript 支持，使用 svelte-check 进行类型验证
  • 应用程序和 Node.js 环境的独立 TypeScript 配置
  • @tsconfig/svelte 基础配置

来源：packages/create-vite/template-svelte/package.json11-15 packages/create-vite/template-svelte-ts/package.json11-19

Web Components 和其他框架

Lit 模板

  • Lit 3.3.0，用于 Web Components 开发
  • 最小化配置，符合 Web 标准
  • 提供 TypeScript 版本以确保类型安全

Preact 模板

  • Preact 10.26.7，作为轻量级的 React 替代方案
  • @preact/preset-vite 用于优化打包
  • 兼容 React 生态系统的工具

Solid 模板

  • SolidJS 1.9.7，用于细粒度响应式开发
  • vite-plugin-solid 用于 JSX 转换
  • TypeScript 支持，拥有专用插件

来源：packages/create-vite/template-lit/package.json11-16 packages/create-vite/template-preact/package.json11-17 packages/create-vite/template-solid/package.json11-17

构建流程模式

不同的模板根据其框架需求实现各种构建策略

来源：packages/create-vite/template-react-ts/package.json8 packages/create-vite/template-vue-ts/package.json8 packages/create-vite/template-svelte-ts/package.json8 packages/create-vite/template-lit-ts/package.json8

通用脚本和配置

所有模板都共享一致的脚本结构

脚本目的实现
dev开发服务器vite
build生产构建特定于框架（见上文）
preview预览构建的应用vite preview 或 serve dist

附加工具脚本

一些模板包含专门的脚本

  • React 模板：lint 脚本，使用 ESLint 和 React 规则
  • Svelte TypeScript：check 脚本，用于通过 svelte-check 进行类型验证
  • Qwik 模板：使用 serve 包而不是 vite preview 进行自定义预览

来源： packages/create-vite/template-react/package.json6-10 packages/create-vite/template-svelte-ts/package.json6-11 packages/create-vite/template-qwik/package.json6-9

依赖项和插件架构

来源： packages/create-vite/template-react-ts/package.json20 packages/create-vite/template-vue-ts/package.json15 packages/create-vite/template-svelte-ts/package.json13 packages/create-vite/template-preact-ts/package.json15 packages/create-vite/template-solid-ts/package.json17

模块系统配置

所有模板在其 package.json 文件中都一致地使用了 ES 模块，并包含 "type": "module" 字段。此配置启用了

  • Node.js 中的原生 ES 模块支持
  • 顶层 import/export 语句
  • 与 Vite 的 ES 模块优先方法的兼容性
  • 现代 JavaScript 模块解析

"private": true 字段确保模板不会被意外发布到 npm，并且版本号设置为 "0.0.0" 作为新项目的占位符。

来源： packages/create-vite/template-vanilla/package.json4-5 packages/create-vite/template-react/package.json3-5 packages/create-vite/template-vue/package.json3-5