Онлайн-курс

Vite

Vite — свежий и быстрый инструмент сборки для фронтенда и серверной части приложения.

На курсе познакомимся с основными возможностями Vite и научимся с ним работать.

Гибкие сроки: начинайте прямо сейчас и двигайтесь в комфортном режиме.

Купить курс

Курс поможет вам получить востребованный навык и повысить свою ценность на рынке

Vite

Vite обладает собственной экосистемой с плагинами, CLI и даже фреймворком для тестирования кода Vitest. Сейчас Vite продолжает стремительно набирать популярность — его используют более трёх миллионов разработчиков по всему миру, поэтому этот инструмент точно стоит изучить.

После курса вы сможете создавать собственные сборки и менять конфиги в рабочих проектах. Вы станете тратить меньше времени на разработку — Vite снимет с вас часть рутинных задач.

Ваши приложения станут быстрее, ведь вы научитесь оптимизировать код и сжимать размер файлов или шрифтов перед деплоем проекта.

На курсе рассматривается версия Vite 5.

Типовые задачи, которые вы сможете решать

Разработчикам от разработчиков

Сделано для разработчиков, у которых мало времени на обучение.

На курсе «Git и GitHub» вы получите:

Комьюнити каждого курса — это авторы, опытные разработчики и студенты, прошедшие или проходящие этот курс.

Комьюнити не только помогает в освоении материала, но и постоянно делает курс лучше.

Как проходит обучение

Курс предполагает самостоятельное изучение материала в комфортном для вас режиме. Приступить к обучению можно прямо сейчас.

Материал разбит на модули, каждый из которых позволит постепенно осваивать навык от основ до тонкостей.

В каждом модуле может быть:

Теория

Теория

Полезные статьи о принципах работы с Vite. Структурированная информация, необходимая для усвоения навыка.

Кейсы

Пошаговые примеры решения типовых задач. Показывают, как правильно писать код, и учат применять теорию на практике.

Кейсы
Практические задания

Практические задания

Для закрепления полученной теории. Учат решать задачи, которые встречаются в реальной работе.

Эталонные решения

Готовые решения заданий. Подскажут, как решить задачу, если у вас что-то не получается.

Эталонные решения
Тестирование

Тестирование

Вопросы по статьям раздела. Помогают проверить, всё ли вы запомнили. Если что-то не получилось, можно посмотреть ответы и пояснения к ним, а затем пройти тест заново.

Поддержка в комьюнити

Cообщество авторов, опытных специалистов и студентов курса. Общайтесь с единомышленниками и обменивайтесь опытом.

Поддержка в комьюнити

Программа курса

Программа построена так, чтобы вы постепенно углубляли знания.

Необходимые знания: базовый JavaScript, Git.

Раздел 1

Введение

Узнаем, что такое Vite и рассмотрим его возможности. Познакомимся с Vite CLI и развернём базовую сборку на Vite.

  • Что такое Vite.
  • Vite CLI.
  • Основные возможности Vite.
  • Демо: zero-config сборка.
ПрактикаПрактика
  • Задание: установка Vite.
  • Решение: пошаговая эталонная реализация.
ТестТест
  • Тест по материалам раздела.
Раздел 2

Погружение в конфигурацию Vite

Познакомимся с конфигурационным файлом для Vite и организацией файловой структуры в проекте. Узнаем, как можно собирать стили и работать с графикой в контексте Vite.

  • Структура файлов проекта
  • Сборка стилей
  • Работа с графикой
  • Сборка мультистраничного сайта
  • Демо: написание сборки для одностраничного сайта
  • Демо: написание сборки для мультистраничного сайта
  • Демо: транспиляция, минификация и сорсмапы
ПрактикаПрактика
  • Задание: пишем свою сборку на Vite.
  • Решение: пошаговая эталонная реализация.
ТестТест
  • Тест по материалам раздела.
Раздел 3

Режимы разработки и деплой

Рассмотрим понятие окружения в разработке. Какие бывают окружения и как они работают в контексте Vite. Узнаем, что такое переменные окружения и как ими управлять. Изучим деплой Vite-проекта на GitHub Pages.

  • Режимы сборки
  • Переменные окружения
  • Деплой Vite проекта на GitHub Pages
  • Демо: режимы сборки
  • Демо: используем переменные окружения
ПрактикаПрактика
  • Задание: используем переменные сборки и настраиваем режимы разработки. Загружаем свой проект на GitHub Pages.
  • Решение: пошаговая эталонная реализация.
ТестТест
  • Тест по материалам раздела.
Раздел 4

Vitest. Тестируем код с помощью Vite

Изучим фреймворк Vitest, его особенности и примеры использования. Рассмотрим основные концепции, методы, функции. Протестируем компонент.

  • Vitest — установка и настройка
  • Vite test — тестируем код
  • Демо: тестируем компонент счётчика
ПрактикаПрактика
  • Задание: добавляем Vitest в проект.
  • Решение: пошаговая эталонная реализация.
ТестТест
  • Тест по материалам раздела.
Раздел 5

Дополнительные возможности

Познакомимся с некоторыми плагинами для Vite. Узнаем про алиасы и настроим их в проекте. Рассмотрим интеграции Vite с фронтенд-фреймворками и затронем тему сборки PWA.

  • Плагины в Vite
  • Алиасы в Vite
  • Интеграция с фреймворками и инструментами
  • Демо: добавляем плагин в сборку
ПрактикаПрактика
  • Задание: используем плагины в сборке.
  • Решение: пошаговая эталонная реализация.
ТестТест
  • Тест по материалам раздела.
Раздел 6

Заключение и миграция с Gulp

Рассмотрим аспекты миграции с Gulp, порассуждаем о сборщиках кода. Подведём итоги курса.

  • Gulp и Vite. Соотношение инструментов
  • Основные аспекты миграции с Gulp на Vite
  • Ещё больше возможностей
  • Финал
ТестТест
  • Тест по курсу

Сертификат

После прохождения курса вы получите электронный сертификат

Образовательная деятельность осуществляется на основании государственной лицензии № 3026 от 6 июня 2017 года.

Сертификат онлайн-курса «Git и GitHub»

На нашей стороне

Что говорят разработчики

Загружаем…

Запишитесь на консультацию

Мы поможем выбрать курс, ответим на все вопросы и расскажем о действующих скидках.

*Обязательное поле