Создание 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.

npm i -g vue-cli

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

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

vue init webpack vuetube

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

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

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

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

<template>
  <div class="video-player">
 Welcome to VueTube
  </div>
</template>

<script>
export default {
  name: 'VideoPlayer',
  data () {
 return {
 }
  }
}
</script>

<style scoped>
</style>

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

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

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

<template>
  <div id="app">
 <VideoPlayer/>
  </div>
</template>

<script>
import VideoPlayer from './components/VideoPlayer'

export default {
  name: 'App',
  components: {
 VideoPlayer
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

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

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

cd vuetube && npm run dev

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

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

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

//VideoPlayer.vue
<script>
let videos = [];

export default {
...

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

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

//VideoPlayer.vue
let videos = [
  {
 id: 1,
 title: "18-core iMac Pro Review: Not a Trap!",
 thumbnail:
 "https://i.ytimg.com/vi/jn9mHzXJIV0/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLAvJvk4k_UNB9nst4pFP-txM1TLZA",
 youtubeURL: "https://www.youtube.com/embed/jn9mHzXJIV0",
 creator: "Marques Brownlee",
 likes: 0,
 views: 0
  },
  {
 id: 2,
 title: "Dope Tech: Camera Robots!",
 thumbnail:
 "https://i.ytimg.com/vi/UIwdCN4dV6w/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLDhlan32jHSvicGZezDFPjAOdXGUA",
 youtubeURL: "https://www.youtube.com/embed/UIwdCN4dV6w",
 creator: "Marques Brownlee",
 likes: 0,
 views: 0
  },
  {
 id: 3,
 title: "Let's Talk About Tesla Roadster 2020!",
 thumbnail:
 "https://i.ytimg.com/vi/ctx4YBEdOxo/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLBDnlrC2rVwXamNkicEEbc3Mf4T0w",
 youtubeURL: "https://www.youtube.com/embed/ctx4YBEdOxo",
 creator: "Marques Brownlee",
 likes: 0,
 views: 0
  },
  {
 id: 4,
 title: "Talking Tech with Neil deGrasse Tyson!",
 thumbnail:
 "https://i.ytimg.com/vi/pqQrL1K0Z5g/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLA5hTiwkz4Tr1w1hSMhPlwtmQeyYw",
 youtubeURL: "https://www.youtube.com/embed/pqQrL1K0Z5g",
 creator: "Marques Brownlee",
 likes: 0,
 views: 0
  },
  {
 id: 5,
 title: "The Apple Ecosystem: Explained!",
 thumbnail:
 "https://i.ytimg.com/vi/KB4_WIPE7vo/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLCCxXm7aoPShOwON74nhMlGYMUkHw",
 youtubeURL: "https://www.youtube.com/embed/KB4_WIPE7vo",
 creator: "Marques Brownlee",
 likes: 0,
 views: 0
  }
];

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

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

export default {
  name: 'VideoPlayer',
  data () {
 return {
 videos
 }
  }
}

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

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

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

<div class="video-list">
 <div :key="video.id" v-for="video in videos" class="thumbnail">
 <div class="thumbnail-img">
 <img :src="video.thumbnail" />
 </div>
 <div class="thumbnail-info">
 <h3>{{video.title}}</h3>
 <p>{{video.creator}}</p>
 <p class="thumbnail-views">{{video.views}} Views</p>
 </div>
 </div>
</div>

Создание 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.

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

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

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

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

<style scoped>
  .thumbnail{
 display:flex;
  }
</style>

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

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

.thumbnail img{
 width:168px;
}

.thumbnail-info{
 margin-left:20px;
}

.thumbnail h3{
 font-size:16px;
}

h3,
p{
 margin:0;
 padding:0;
}

.thumbnail-views{
 font-size:14px;
}

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

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

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

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

export default {
  name: 'VideoPlayer',
  data () {
 return {
 videos,
 activeVideo: videos[0]
 }
  }
}

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

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

<div class="video-container">
 <iframe width="640" height="360" :src="this.activeVideo.youtubeURL" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

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

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

<iframe ....>
<h3>{{this.activeVideo.title}}</h3>
<div class="row">
 <p>{{this.activeVideo.views}} views</p> 
 <p>{{this.activeVideo.likes}} <button>Like</button></p>
</div>

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

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

.video-player{
 display:flex;
 width:1200px;
 margin:auto;
}

.video-container{
 margin-right:40px;
}

.row{
 display:flex;
 justify-content:space-between;
}

button{
 background:#D0021B;
 color:white;
 border:none;
 padding:10px 20px;
}

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

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

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

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

methods:{
  chooseVideo(video){
 //SET VIDEO AS ACTIVE VIDEO
 this.activeVideo = video;
 //INCREASE THE VIDEOS VIEWS BY 1
 video.views += 1;
  }
}

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

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

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

<div @click="chooseVideo(video)" :key="video.id" v-for="video in videos" class="thumbnail">

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

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

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

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

addLike(){
  this.activeVideo.likes += 1;
}

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

<button @click="addLike">Like</button>

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

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

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

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

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

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

<div id="app">
 <img style="width:140px; margin:14px;" src="./assets/logo.png"/> 
 <VideoPlayer/>
</div>

Создание 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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree