Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox

От автора: в этом уроке мы создадим своего конкурента YouTube под названием VueTube. Делать это будем с помощью Webpack, Vue JS и Flexbox. Скриншот конечного продукта!

 

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

Предварительные условия

Vue – замечательный JS front end фреймворк для создания потрясающих интерфейсов. Webpack – упаковщик модулей для JS, который получает файлы, используемые в разработке, и упаковывает их в один статичный файл. Намучались с позиционированием в CSS? Flexbox все упрощает.

Эти техники и инструменты мы будем использовать для создания нашего клона YouTube.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Начало

В этом уроке мы будем создавать и запускать однофайловые компоненты с помощью Webpack. Для начала проверьте, установлен ли у вас vue-cli.

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

После установки vue-cli создаем новый проект с помощью билд-шаблона Webpack, который идет вместе с Vue CLI. Запустите в командной строке следующее:

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

Ответьте на все вопросы. Нам не понадобится vue-router для этого проекта.

Создание компонента Video Player

Мы создали проект. Теперь можно создать компонент Video Player. Откройте проект в редакторе кода (я рекомендую VS Code). Перейдите в папку /src/components/ и создайте файл VideoPlayer.vue. Отредактируйте компонент:

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

Это голый однофайловый компонент Vue. Он включает шаблон для представления, скрипт для логики компонента и стили, которые через scoped ограничены нашим компонентом.

Теперь можно сказать App.vue, чтобы тот показал VideoPlayer вместо компонента по умолчанию HelloWorld. Для этого нам необходимо заменить файл App.vue в /src на этот файл.

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

Мы импортируем правильный компонент и показываем его при старте приложения. Давайте запустим приложение и посмотрим наш прогресс. Запустите:

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

Создание наших данных

Мы создали приложение, теперь давайте наполним его видео. Для хранения информации о видео будем использовать объект данных Vue. Создадим переменную videos внутри тега script.

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

Мы создали пустой массив videos. Добавим в него 5 видео. Я возьму видео с Tech Reviewer MKBHD. Вы можете использовать любые другие ролики.

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

Мы храним 6 основных атрибутов. Для каждого видео Id, Title, URL, Creator, Likes и Views. У нас есть данные, теперь можно вывести их на экран. Первым делом установим переменную videos в объект данных.

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

Перебор данных в цикле

Отлично, теперь можно перебрать в цикле данные показать список видео в плеере. Для этого воспользуемся директивой v-for.

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

Мы перебираем в цикле созданный ранее массив videos. Запись v-for=”video in videos” перебирает в цикле все объекты или video внутри массива videos.

Мы перебираем массив, поэтому мы можем обращаться к полям из каждого объекта. В списке видео нам необходимо показывать превью, создателя, просмотры и заголовок. Обратиться к этим полям внутри шаблона можно через handlebar нотацию типа {{video.title}}

Превью должно показывать изображение, поэтому нам необходимо привязать поле к src изображения. Для тегов нельзя использовать нотации handlebar. Вместо этого чтобы привязать url, используем :src.

Обновите браузер и посмотрите, что получилось! Должно быть что-то вроде этого:

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

Приукрашиваем список видео

Отлично! У нас теперь есть список видео. Давайте отформатируем его. Наш список видео должен походить на правый сайдбар с видео на YouTube. Используем в макете Flexbox, чтобы сделать наш список похожим на YouTube.

Во-первых, превью изображение и div с информацией должны быть на одной строке. Для этого добавим в класс превью всего одну строку.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

Отлично, информация и видео расположены на одной строке. Теперь добавим остальные стили.

Обновите браузер!

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

Настройка активного видео

Мы полностью настроили список превью и можем перейти к отображению наших видео. При первой загрузке приложения можно показывать первое видео из массива. Для этого создадим поле activeVideo в объекте data. С помощью этого поля мы будем показывать видео, которое выбрал пользователь. Чтобы после загрузки страницы устанавливалось первое видео, необходимо установить activeVideo в videos[0].

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

Активное видео стало частью объекта data. То есть мы можем обратиться к нему просто через ссылку this.activeVideo внутри шаблона. Чтобы показать видео с YouTube, можно создать iframe, привязанный к полю youtubeURL нашего объекта video.

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

Добавим под iframe остальную информацию о видео.

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

Отлично! Теперь у нас есть активное отображаемое видео. Добавим ему красоты.

Обновите браузер!

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

Заставляем работать!

Давайте реализуем выбор видео для просмотра. Напишем метод в теге script.

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

Мы создали метод chooseVideo, который принимает видео в качестве параметра. Этот метод будет вызываться, когда пользователь выбирает превью из списка видео. После выбора видео устанавливаем activeVideo значение видео, по которому был совершен клик, и увеличиваем просмотры на 1.

Созданный метод необходимо привязать к событию click для каждого видео в цикле v-for

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

Попробуйте кликнуть на видео в списке! Если все будет хорошо, вы сможете посмотреть выбранное видео.

Настройка кнопки like

Последний наш шаг – настроить кнопку like. Напишем еще один метод, который будет добавлять единицу к общему числу по клику на кнопку.

Метод addLike можно привязать к кнопку like в шаблоне

Обновите браузер и попробуйте лайкнуть видео! Счетчик должен увеличиваться. Значение будет сохраняться даже при переходе к другому ролику.

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

Добавляем последние штрихи

Напоследок можно добавить логотип нового видео плеера. Сохраните изображение ниже как logo.png в папку assests.

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

Теперь можно добавить логотип в файл App.vue

Создание VueTube: клон YouTube на VueJS, Webpack и Flexbox title=

Спасибо, что дочитали до конца. Надеюсь, вам понравился урок. Задавайте вопросы и оставляйте комментарии.

Автор: Alex Brown

Источник: https://medium.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree