Команды

• yarn dev - запуск в режиме разработки
• yarn build - создание сборки для продакшина

Структура

За основу взята концепция multipage application. То есть будет для каждой страницы будет свой html файл

Все html файлы страниц лежат в папке pages (кроме index.html, который всегда должен быть в корне, чтобы потом не было проблем с деплоем). Для добавление новой страницы нужно просто создать новый файл. Конфиг vite следит за тем, что в папке pages создаеются файлы (может нужно будет перезапустить приложение)

Для каждой страницы должен быть свой scss и js файл. Также будет общий scss и js, который содержить стили и скрипты, которые используются на всех страницах. Таким образом мы оптимизируем загрузку страницы, так как у каждой страницы будет свои небольшие файлы стилей и скриптов, вместо того, чтобы тащить один большой файл на все страницы

Стили подключаются в корневом файле js для страницы

Например

import "../../styles/general.scss"; // файл для общих стилей
import "../../styles/pages/second.scss"; // файл стилей для конкретной страницы

Скрипты подключаются в html файле

Например

<script type="module" src="../js/pages/second.js"></script>