Делим Index на компоненты

[semen1032]

Пришла пора разбить главную страницу на компоненты.

Что нужно?

1. Выделить саму страницу в отдельный компонент Index-page.vue
2. Выделить компоненты на этой странице

Предлагаю разбить страницу следующим образом:

1. Баннер Banner.vue
2. Конкурсы Competitions-list.vue

Banner.vue

Представляет собой элемент-контейнер, имеющий фоновое изображение.

Нужно учитывать возможности:

1. Изменять фоновое изображение
2. Иметь возможность применять компонент на нескольких страницах (пример: главная и детали конкурса)

Для этого нужно выделить варианты отображения в отдельные компоненты, которые будет содержать баннер (Announcement__banner.vue и Competition__banner.vue).

Announcement__banner.vue

Вариант отображения - как на главной странице.

В нем выделяем поля:

1. Заголовок
2. Описание

Также необходимо сделать возможность простого способа изменить содержание текста администратором сайта.

Competitions-list.vue

Список с конкурсами как отдельными компонентами. Также содержит кнопку "Показать все конкурсы"

Можно также подумать над различными вариантами отображения для переиспользования компонента на других страницах

Competition.vue

Содержит данные о конкурсе. Содержание требуется обдумать.

Итого

Ориентировочно нужно выделить компоненты:

• Index-page.vue
• Banner.vue
• Announcement__banner.vue
• Competitions-list.vue
• Competition.vue