Часть 3. Создание главной страницы

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

1. Создайте файл pages/index.vue 2. Добавление стилей и блоков с помощью TailwindCSS.

TailwindCSS позволяет легко создать адаптивный дизайн с помощью утилитарных классов. В уже добавленном коде для главной страницы вы можете заметить использование таких классов для создания адаптивного макета. Ниже приведу пару примеров классов.

1. Контейнер и отступы: mx-auto (центрирование по горизонтали), container (установка максимальной ширины), p-4 (внутренние отступы со всех сторон) 2. Заголовок и текст: text-3xl (размер текста), font-semibold (жирность текста), text-center (центрирование текста) 3. Сетка и карточки: grid (грид контейнер), grid-cols-* ( * - количество колонок ), gap-4 (промежуток между элементами сетки), rounded-lg (закругление) 4. Адаптив: sm, md, lg, xl, 2xl - адаптивные экраны

Откройте приложение в браузере по адресу http://localhost:3000 (с помощью команды npm run dev в консоли) и измените размер окна браузера, чтобы увидеть, как контент адаптируется к разным размерам экранов.

Теперь у вас есть главная страница с адаптивным дизайном, созданным с помощью TailwindCSS. В следующем посте я расскажу о том, как управлять состоянием приложения с помощью Pinia.

Если у вас возникнут вопросы, не стесняйтесь задавать их!

#Nuxt #Vue #TailwindCSS #Frontend #ВебРазработка #ГлавнаяСтраница #АдаптивныйДизайн