2.1 脚手架命令
Vite 官方提供 create-vite 脚手架，各包管理器的调用方式：
# npm（≥ 7）
$ npm create vite@latest my-app
# pnpm
$ pnpm create vite my-app
# yarn
$ yarn create vite my-app
# bun
$ bun create vite my-app交互式界面会问两个问题：Framework 和 Variant（TS/JS）。
2.2 官方模板一览
| Framework | 变体 | 说明 |
|---|---|---|
| vanilla | TS / JS | 原生 JS，不带框架 |
| vue | TS / JS | Vue 3 + <script setup> |
| react | TS / JS / SWC 变体 | React 18+；SWC 变体用 @vitejs/plugin-react-swc |
| preact | TS / JS | 轻量 React 替代 |
| lit | TS / JS | Web Components 框架 |
| svelte | TS / JS | Svelte 5（Runes） |
| solid | TS / JS | SolidJS |
| qwik | TS | Qwik（Resumable） |
直接指定模板免交互
$ npm create vite@latest my-app -- --template react-ts-- 后的参数是传给 create-vite 的。模板名格式：<framework>[-variant]，如 vue-ts、react-swc-ts、svelte。
2.3 项目结构
以 react-ts 模板为例：
my-app/
├── public/ # 原样拷贝到产物根，不经过构建
│ └── vite.svg
├── src/
│ ├── assets/ # 会经过构建的资源
│ │ └── react.svg
│ ├── App.tsx
│ ├── App.css
│ ├── main.tsx # 应用入口（ReactDOM.createRoot）
│ ├── index.css
│ └── vite-env.d.ts # Vite 内置类型声明
├── index.html # ★ 项目的真正入口，不是在 src/ 里！
├── package.json
├── tsconfig.json
├── tsconfig.node.json # 给 vite.config.ts 用的单独 tsconfig
├── vite.config.ts
└── .gitignore★ 最关键的认知：index.html 是入口
Vite 把 index.html 视为项目的起点（而非 webpack 的 src/index.js）。打开 index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>这个 HTML 就是你平时写的 HTML，<script type="module"> 引入 TS 入口——Vite 劫持这些请求，按 ESM 协议返回编译后的模块。
2.4 package.json 脚本
{
"scripts": {
"dev": "vite", // 启动开发服务器
"build": "tsc -b && vite build", // 先类型检查再打包
"preview": "vite preview", // 本地预览生产包
"lint": "eslint ."
}
}
为什么 build 要先跑 tsc？
Vite 的 esbuild 只负责"去掉类型注解"，不做类型检查——这是刻意的性能取舍。生产构建时用 tsc -b --noEmit 补上一道类型检查，错误就不会漏到线上。
2.5 运行项目
$ cd my-app
$ npm install
$ npm run dev
VITE v6.0.0 ready in 312 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help打开 http://localhost:5173 就能看到 hello world 页面。
Dev Server 的交互式快捷键
按 h + enter 可看到所有键位：
- r
- restart，重启服务器
- u
- show server url，再次打印 URL
- o
- open in browser，自动打开浏览器
- c
- clear console，清屏
- q
- quit，退出
2.6 生产构建与预览
$ npm run build
vite v6.0.0 building for production...
✓ 34 modules transformed.
dist/index.html 0.46 kB │ gzip: 0.30 kB
dist/assets/index-Bw7LyXj8.css 1.39 kB │ gzip: 0.72 kB
dist/assets/index-CoTJJEcX.js 143.50 kB │ gzip: 46.12 kB
✓ built in 1.42s
$ npm run preview
➜ Local: http://localhost:4173/vite preview 启动一个静态文件服务器，专用于在本地验证生产构建的产物。注意它不做开发功能（没有 HMR、没有源码映射外的热更新），仅用于"部署前自查"。
2.7 常见变体：React + SWC
React 官方模板有两个变体：
react-ts：用 @vitejs/plugin-react（Babel 转译 JSX）react-swc-ts：用 @vitejs/plugin-react-swc（SWC 转译，Rust 实现）
SWC 更快但某些 Babel 生态插件不支持。新项目默认选 SWC 即可。
2.8 手动集成到已有项目
脚手架是便利，但并非必须。手动加 Vite 到任何已有项目：
$ npm install -D vite
$ npm install -D @vitejs/plugin-react # 或其他框架插件
# 在项目根创建 index.html 和 vite.config.ts
# package.json 加脚本 "dev": "vite"
$ npm run dev2.9 小结
npm create vite@latest my-app起新项目，通过--template react-ts免交互。- index.html 是入口，而非
src/里某个 JS 文件——这是 Vite 最独特的设计。 npm run dev启动服务器，build做生产打包，preview本地预览。- React 项目推荐选
react-swc-ts。