create-vue, Vite и структура проекта

Новый разработчик в команде клонирует Vue-проект и видит в корне десяток файлов: vite.config.ts, package.json, index.html, папки src и public. Первый вопрос: где вообще точка входа и почему index.html почти пустой? Ответ в том, что современный Vue-проект не собирается руками. Команда npm create vue@latest за минуту генерирует рабочий скелет, а Vite 8 берёт на себя dev-сервер, горячую перезагрузку и продакшен-сборку. Понимание, что где лежит, экономит часы блужданий в первую неделю.

• Любой стартовый Vue-проект в 2026 году создаётся через create-vue, это официальный скаффолдер от команды Vue
• Vite вырос из нужд Vue (его автор Эван Ю), но сегодня на нём собирают React, Svelte и проекты без фреймворка
• Горячая замена модулей в Vite обновляет компонент в браузере за десятки миллисекунд без полной перезагрузки страницы
• Nuxt 4, Astro и Vitest используют Vite под капотом, так что понимание его структуры переносится на весь экосистемный стек
• CI-пайплайны в проде запускают ровно npm run build, поэтому важно понимать, что именно делает эта команда

Предварительные знания

• Установленный Node.js версии 20 или новее и пакетный менеджер npm
• Базовая работа с терминалом: переход по папкам, запуск команд
• Понимание из урока vue-01, что такое Vue и прогрессивный фреймворк
• Знакомство с форматом package.json на уровне идеи

Создание проекта через create-vue

Официальный способ начать проект в 2026 году это команда npm create vue@latest. Она запускает скаффолдер create-vue, который задаёт серию вопросов: имя проекта, нужен ли TypeScript, JSX, Vue Router для маршрутизации, Pinia для состояния, Vitest для юнит-тестов и линтер. По ответам генерируется готовая структура с установленными зависимостями и настроенным Vite.

Скаффолдер не привязывает к лишнему: каждый компонент опционален. Минимальный ответ нет на все вопросы даёт чистый проект с одним App.vue. Это снова та самая прогрессивность из первого урока - стартовый набор ровно под задачу. После npm install и npm run dev в терминале появляется локальный адрес вроде http://localhost:5173, и приложение открывается в браузере.

Команда create vue@latest всегда тянет свежую версию скаффолдера. Версию самого Vue фиксирует package.json уже внутри сгенерированного проекта, так что обновление шаблона не ломает существующие проекты.

Структура папок и точка входа

Сгенерированный проект имеет предсказуемую структуру. В корне лежат конфигурационные файлы, а весь код приложения в папке src. Точка входа это index.html в корне: он почти пустой и подключает один скрипт-модуль, с которого начинается жизнь приложения.

Поток запуска такой: браузер грузит index.html, тот подключает src/main.ts, файл создаёт экземпляр приложения через createApp(App) и монтирует его в div с id app внутри index.html. Дальше управление переходит к Vue. Разница между src и public важна: всё из src проходит через Vite (компиляция .vue, обработка импортов, оптимизация), а public копируется в итоговый dist без изменений, для файлов вроде robots.txt или favicon.

В index.html сборки нет ни одного тега script с реальным кодом приложения. Vite сам подставляет нужные скрипты: в режиме разработки это ссылка на модуль с HMR, в продакшене - оптимизированные бандлы с хешами в именах для кеширования.

Vite: dev, build и preview

Vite играет две роли. В разработке это dev-сервер, который не собирает весь проект заранее. Браузеры умеют грузить нативные ES-модули, поэтому Vite отдаёт файлы по запросу и компилирует только то, что реально открыто. Это даёт мгновенный старт даже на большом проекте. В продакшене Vite собирает оптимизированный бандл через Rolldown: tree-shaking, минификация, разбиение на чанки.

Горячая замена модулей (HMR) это причина, по которой dev-сервер так удобен. При сохранении файла .vue Vite заменяет в браузере только изменённый компонент, сохраняя текущее состояние приложения, без полной перезагрузки страницы. Команда preview важна тем, что dev-сборка и прод-сборка ведут себя по-разному: preview даёт убедиться, что собранное приложение работает, до выката на сервер.

Команда preview предназначена только для локальной проверки прод-сборки. Это не продакшен-сервер: на бою папку dist отдаёт настоящий веб-сервер вроде Nginx или платформа вроде Vercel. Использовать preview как боевой сервер нельзя.

Связь с другими темами

Этот урок готовит рабочее окружение. Дальше изучаем то, что лежит внутри:

• Single File Component — Файлы .vue в папке src это то, что разработчик начнёт редактировать сразу после установки
• Синтаксис шаблонов — Шаблоны внутри сгенерированных компонентов используют директивы, которые разбираются дальше

Итог

• Проект создаётся командой npm create vue@latest, которая задаёт вопросы (TypeScript, Router, Pinia, тесты) и генерирует готовый скелет
• Vite 8 это сборщик и dev-сервер: в разработке он отдаёт модули нативным ESM без полной сборки, в продакшене собирает бандл через Rolldown - единый Rust-бандлер, заменивший esbuild и Rollup в Vite 8
• index.html это точка входа, он подключает src/main.ts, который создаёт приложение и монтирует корневой компонент App.vue в элемент с id app
• Папка src содержит исходники (компоненты, ассеты), public отдаётся как есть без обработки, vite.config.ts настраивает сборку
• Три ключевые команды: dev запускает локальный сервер с HMR, build делает продакшен-бандл в dist, preview локально показывает собранный результат

Связанные уроки

• vue-03-sfc-components — После создания проекта первое, что встречает разработчик в src - это файлы .vue. Следующий шаг разобрать их формат
• vue-01-why-vue — Установка имеет смысл после понимания, зачем нужен Vue и что такое прогрессивный фреймворк