Скоро! Профессиональный онлайн-курс Vite [HTML Academy]

[SHAREWOOD]

Профессиональный онлайн-курс Vite [HTML Academy]

Описание:

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

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

В ходе курса мы ознакомимся с ключевыми функциями Vite и научимся работать с ним. Курс ориентирован на версию Vite 5.

На курсе вы освоите следующие навыки:

• Настройку Vite-проекта с помощью Vite CLI
• Конфигурацию Vite для создания одностраничных и многостраничных сайтов
• Интеграцию препроцессоров и Tailwind для создания стилей
• Оптимизацию изображений в контексте Vite
• Понимание режимов сборки и сред разработки
• Управление переменными окружения
• Развертывание Vite-проекта на GitHub Pages
• Тестирование кода с помощью Vitest
• Установку плагинов в Vite для специфических потребностей проекта
• Сознательный выбор инструментов для каждого конкретного проекта

Spoiler: Программа курса
Раздел 1
Введение
Мы изучим основные возможности Vite, ознакомимся с Vite CLI и выполним базовую настройку на Vite.

— Введение в Vite
— Обзор Vite CLI
— Особенности работы с Vite
— Демо: настройка без конфигурации

Практическая задача
— Установка Vite
— Решение: детальное руководство по шагам

— Тестирование знаний по материалам раздела

Раздел 2
Глубокое погружение в конфигурацию Vite

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

— Организация файлов проекта
— Создание стилей
— Работа с изображениями
— Создание многостраничного сайта
— Демо: настройка одностраничного сайта
— Демо: настройка многостраничного сайта
— Демо: транспиляция, минификация и карты исходников

Практическая задача
— Создание собственной сборки на Vite
— Решение: подробное руководство по шагам

— Тестирование знаний по материалам раздела

Раздел 3
Среды разработки и деплой

Мы обсудим концепцию окружения в разработке, изучим переменные окружения и научимся управлять ими. Также рассмотрим деплой проекта на 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
— Дополнительные возможности
— Завершение курса

— Финальный тест по курсу[/SIZE]

Ссылка: Скрытая ссылка

Материал «Профессиональный онлайн-курс Vite [HTML Academy]», возможно, скоро появится на SHAREWOOD.

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