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

Создаём первый проект Vue официальным способом — через npm create vue@latest на базе Vite — и разбираем, что лежит в каждой папке.

Vite — современный сборщик и dev-сервер: мгновенный запуск, горячая перезагрузка модулей (HMR) и оптимизированная сборка для продакшена. Это рекомендованный инструмент для проектов на Vue 3.

Что понадобится

Нужен установленный Node.js (LTS-версия, 18 или новее) — вместе с ним приходит менеджер пакетов npm. Проверьте версию:

node -v
npm -v

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

Официальный стартер запускается одной командой. Она задаст несколько вопросов (имя проекта, нужен ли TypeScript, Router, Pinia) — для начала можно отвечать «No» на дополнительные опции:

npm create vue@latest

После ответов на вопросы переходим в папку проекта, устанавливаем зависимости и запускаем dev-сервер:

cd my-vue-app
npm install
npm run dev

В терминале появится адрес вроде http://localhost:5173 — откройте его в браузере. Любое изменение в коде сразу отражается на странице благодаря HMR: перезагружать вкладку вручную не нужно.

Структура проекта

Стартер создаёт примерно такую структуру. Разберём ключевые файлы:

my-vue-app/
├── index.html          точка входа HTML (тут div#app)
├── package.json        зависимости и команды (scripts)
├── vite.config.js      настройки сборщика Vite
└── src/
    ├── main.js         создаёт и монтирует приложение Vue
    ├── App.vue         корневой компонент
    ├── components/     ваши компоненты (.vue)
    └── assets/         стили, картинки

Точка входа: main.js

Файл main.js — это место, где приложение «рождается». Функция createApp создаёт экземпляр приложения из корневого компонента, а mount вставляет его в элемент страницы:

import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'

createApp(App).mount('#app')

В index.html есть пустой <div id="app"></div> — именно в него Vue вставит ваш интерфейс. (Этот фрагмент не запускается здесь: import модулей и .vue-файлы работают только в реальном проекте со сборкой.)

Команды package.json

Итог

• npm create vue@latest создаёт проект на Vite с официальной структурой.
• npm run dev запускает сервер разработки с мгновенной перезагрузкой.
• main.js создаёт приложение через createApp(App) и монтирует его в #app.
• npm run build готовит оптимизированную сборку для продакшена.