2. Установка и шаблоны

Vite предоставляет официальный CLI для создания новых проектов — create-vite. Это самый быстрый способ начать работу с любым поддерживаемым фреймворком.

Создание нового проекта

# Рекомендуемый способ (интерактивный wizard)
npm create vite@latest

# Или с указанием имени сразу
npm create vite@latest my-app

# С выбором шаблона через флаг
npm create vite@latest my-react-app -- --template react-ts

# Через pnpm / yarn / bun
pnpm create vite@latest
yarn create vite
bun create vite@latest

Доступные шаблоны

Базовые шаблоны:
vanilla          vanilla-ts
react            react-ts          react-swc         react-swc-ts
vue              vue-ts
preact           preact-ts
lit              lit-ts
svelte           svelte-ts
solid            solid-ts
qwik             qwik-ts

Суффикс -ts добавляет TypeScript поддержку
Суффикс -swc использует SWC вместо esbuild (быстрее для React)

Структура проекта после создания

my-vite-app/
├── public/               # Статические файлы (копируются as-is)
│   └── vite.svg
├── src/
│   ├── assets/           # Импортируемые ресурсы
│   │   └── react.svg
│   ├── App.tsx           # Корневой компонент
│   ├── App.css
│   ├── index.css         # Глобальные стили
│   ├── main.tsx          # Entry point
│   └── vite-env.d.ts     # TypeScript типы для Vite
├── index.html            # ⭐ Entry HTML (не в public!)
├── package.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

index.html — Entry Point

В отличие от Webpack, в Vite index.html является точкой входа и хранится в корне проекта (не в public/):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- Vite обрабатывает этот script как ES Module entry -->
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

package.json скрипты

{
  "scripts": {
    "dev": "vite",             // Запуск dev сервера
    "build": "tsc && vite build", // TypeScript проверка + production build
    "preview": "vite preview", // Предпросмотр production build локально
    "lint": "eslint . --ext ts,tsx"
  }
}

Запуск проекта

cd my-vite-app
npm install
npm run dev

# Dev сервер запустится на http://localhost:5173
# ⚡ Vite v5.x.x  ready in 89ms
# ➜  Local:   http://localhost:5173/
# ➜  Network: http://192.168.1.x:5173/

vite-env.d.ts — TypeScript типы

/// <reference types="vite/client" />

// Этот файл добавляет TypeScript типы для:
// - import.meta.env.MODE, PROD, DEV
// - import styles from './App.module.css'
// - import url from './image.png?url'
// - import Worker from './worker.ts?worker'

Ниже — интерактивный мастер создания проекта: выберите фреймворк, вариант и увидите сгенерированную структуру файлов: