От автора: в этом уроке мы создадим своего конкурента YouTube под названием VueTube. Делать это будем с помощью Webpack, Vue JS и Flexbox. Скриншот конечного продукта!
Предварительные условия
Vue – замечательный JS front end фреймворк для создания потрясающих интерфейсов. Webpack – упаковщик модулей для JS, который получает файлы, используемые в разработке, и упаковывает их в один статичный файл. Намучались с позиционированием в CSS? Flexbox все упрощает.
Эти техники и инструменты мы будем использовать для создания нашего клона YouTube.
Начало
В этом уроке мы будем создавать и запускать однофайловые компоненты с помощью Webpack. Для начала проверьте, установлен ли у вас vue-cli.
npm i -g vue-cli
После установки vue-cli создаем новый проект с помощью билд-шаблона Webpack, который идет вместе с Vue CLI. Запустите в командной строке следующее:
vue init webpack vuetube
Ответьте на все вопросы. Нам не понадобится 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>
Это голый однофайловый компонент 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>
Мы импортируем правильный компонент и показываем его при старте приложения. Давайте запустим приложение и посмотрим наш прогресс. Запустите:
cd vuetube && npm run dev
Создание наших данных
Мы создали приложение, теперь давайте наполним его видео. Для хранения информации о видео будем использовать объект данных Vue. Создадим переменную videos внутри тега script.
//VideoPlayer.vue
<script>
let videos = []; export default {
...
Мы создали пустой массив 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 }
];
Мы храним 6 основных атрибутов. Для каждого видео Id, Title, URL, Creator, Likes и Views. У нас есть данные, теперь можно вывести их на экран. Первым делом установим переменную videos в объект данных.
export default { name: 'VideoPlayer', data () { return { videos } }
}
Перебор данных в цикле
Отлично, теперь можно перебрать в цикле данные показать список видео в плеере. Для этого воспользуемся директивой 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>
Мы перебираем в цикле созданный ранее массив videos. Запись v-for=”video in videos” перебирает в цикле все объекты или video внутри массива videos.
Мы перебираем массив, поэтому мы можем обращаться к полям из каждого объекта. В списке видео нам необходимо показывать превью, создателя, просмотры и заголовок. Обратиться к этим полям внутри шаблона можно через handlebar нотацию типа {{video.title}}
Превью должно показывать изображение, поэтому нам необходимо привязать поле к src изображения. Для тегов нельзя использовать нотации handlebar. Вместо этого чтобы привязать url, используем :src.
Обновите браузер и посмотрите, что получилось! Должно быть что-то вроде этого:
Приукрашиваем список видео
Отлично! У нас теперь есть список видео. Давайте отформатируем его. Наш список видео должен походить на правый сайдбар с видео на YouTube. Используем в макете Flexbox, чтобы сделать наш список похожим на YouTube.
Во-первых, превью изображение и div с информацией должны быть на одной строке. Для этого добавим в класс превью всего одну строку.
<style scoped> .thumbnail{ display:flex; }
</style>
Отлично, информация и видео расположены на одной строке. Теперь добавим остальные стили.
.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;
}
Обновите браузер!
Настройка активного видео
Мы полностью настроили список превью и можем перейти к отображению наших видео. При первой загрузке приложения можно показывать первое видео из массива. Для этого создадим поле activeVideo в объекте data. С помощью этого поля мы будем показывать видео, которое выбрал пользователь. Чтобы после загрузки страницы устанавливалось первое видео, необходимо установить activeVideo в videos[0].
export default { name: 'VideoPlayer', data () { return { videos, activeVideo: videos[0] } }
}
Активное видео стало частью объекта 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>
Добавим под 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>
Отлично! Теперь у нас есть активное отображаемое видео. Добавим ему красоты.
.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;
}
Обновите браузер!
Заставляем работать!
Давайте реализуем выбор видео для просмотра. Напишем метод в теге script.
methods:{ chooseVideo(video){ //SET VIDEO AS ACTIVE VIDEO this.activeVideo = video; //INCREASE THE VIDEOS VIEWS BY 1 video.views += 1; }
}
Мы создали метод chooseVideo, который принимает видео в качестве параметра. Этот метод будет вызываться, когда пользователь выбирает превью из списка видео. После выбора видео устанавливаем activeVideo значение видео, по которому был совершен клик, и увеличиваем просмотры на 1.
Созданный метод необходимо привязать к событию click для каждого видео в цикле v-for
<div @click="chooseVideo(video)" :key="video.id" v-for="video in videos" class="thumbnail">
Попробуйте кликнуть на видео в списке! Если все будет хорошо, вы сможете посмотреть выбранное видео.
Настройка кнопки like
Последний наш шаг – настроить кнопку like. Напишем еще один метод, который будет добавлять единицу к общему числу по клику на кнопку.
addLike(){ this.activeVideo.likes += 1;
}
Метод addLike можно привязать к кнопку like в шаблоне
<button @click="addLike">Like</button>
Обновите браузер и попробуйте лайкнуть видео! Счетчик должен увеличиваться. Значение будет сохраняться даже при переходе к другому ролику.
Добавляем последние штрихи
Напоследок можно добавить логотип нового видео плеера. Сохраните изображение ниже как logo.png в папку assests.
Теперь можно добавить логотип в файл App.vue
<div id="app"> <img style="width:140px; margin:14px;" src="./assets/logo.png"/> <VideoPlayer/> </div>
Спасибо, что дочитали до конца. Надеюсь, вам понравился урок. Задавайте вопросы и оставляйте комментарии.
Автор: Alex Brown
Источник: https://medium.com/
Редакция: Команда webformyself.