Vite (с французского "быстрый", произносится /вит/) - это инструмент сборки, созданный для обеспечения быстрого и бережливого (lean) процесса разработки современных веб-проектов.
Для начала нужно убедиться, что у вас установлены Node.js версии >=12.0.0 и npm (или Yarn). Сделать это можно по инструкции Node.js.
- Откройте терминал или командную строку.
- Введите команду для создания нового проекта с помощью Vite:
npm create vite@latest
- Укажите имя вашего проекта и выберите фреймворк (например, React, Vue, Vanilla JS и т.д.):
✔ Project name: vite-project
✔ Select a framework: › React
✔ Select a variant: › TypeScript (если нужен TypeScript) или просто JavaScript
После выбора Vite создаст структуру проекта.
После создания проекта нужно установить зависимости:
cd vite-project
npm install
Чтобы начать разработку, запустите команду:
npm run dev
После этого Vite запустит локальный сервер и откроет проект в браузере. По умолчанию сервер запускается на http://localhost:5173/.
Конфигурационный файл Vite находится в корне проекта и называется vite.config.js (или vite.config.ts, если используется TypeScript). Он позволяет настраивать различные параметры проекта, например, алиасы, плагины, серверные настройки и прочее.
Если вы разрабатываете небольшое приложение, скорее всего, вам подойдут настройки по умолчанию. Но для более сложных проектов с использованием нескольких плагинов или серверных API можно модифицировать конфиг, добавляя параметры по мере необходимости.
Подробнее про конфигурацию Vite можно прочитать на официальном сайте или в русской версии.
Когда проект готов для публикации, вы можете собрать его с помощью команды:
npm run build
Vite создаст оптимизированные файлы для продакшена в папке dist.
Чтобы протестировать сборку локально, можно запустить сервер предварительного просмотра:
npm run preview
Этого достаточно, чтобы написать своё первое фронтенд-приложение с использованием Vite. Если остались вопросы, всегда можно обратиться к документации. Либо к русской версии.