Испытайте Vue3.0, имитирующий облачный музыкальный клиент NetEase
предисловие
Летом 2019 года я получил большой шанс на «Наггетс».Бог Троицанаписал статьюReact hooks+redux+immutable.js для создания красивого веб-приложения для NetEase Cloud Music, в то время я как раз учился реагировать, поэтому я пошел по стопам босса и начал путь подражания, и с тех пор он вышел из-под контроля. Затем я также использовал реакцию для написания веб-страницы на стороне клиента (макет предыдущей версии Netease Cloud). Теперь, поскольку технологический стек компании, в которой я работаю, использует Vue, хотя проигрыватель сейчас плохой, я думаю, что эта тема хороша для практики, поэтому я воспользуюсь выпуском 3.0, чтобы изучить волну!
Google Chrome и новая версия Edge открываются лучше!
Во-первых, используемый стек технологий
внешний интерфейс:
-
vue3.0Семейный сегмент: (ts+jsx) -
vuex: vuex-module-decorators -
swiper: Очень популярный и практичный плагин карусели,swiper -
create-keyframe-animation: Плагин анимации по ключевым кадрам -
axios: запрос данных
задняя часть:
- API-интерфейс версии NetEase Cloud Music NodeJS с открытым исходным кодом на githubNeteaseCloudMusicApi
разное:
-
stylelint、stylelint-config-standard、stylelint-order: инструмент определения спецификаций CSS, рекомендуемая конфигурация, плагин сортировки по атрибутам.
Во-вторых, общая структура проекта и часть демонстрации
Базовая структура
1. Рекомендуемые модули и модули, связанные с плейлистами
2. Модуль певца, чарты и раздел последней музыки
3. Список и раздел проигрывателя
4. Найдите разделы, связанные с видео
3. Недостаточно
На самом деле, есть еще много мест, которые не идеальны, например, переключение тем, я думал об использовании переменных css, чтобы сделать это, но, поскольку я чувствовал, что есть слишком много мест, которые нужно заменить, я кастрировал его, а место для потянуть вниз, чтобы обновить, было сделано не очень хорошо, поэтому я не делал виртуальную прокрутку. , у изображения нет отдельных изображений по умолчанию и т. д.
Четвертый, последний
Обычно я трачу много денег на Nuggets, и после прочтения кода, написанного многими большими парнями, я чувствую, что мой код действительно намного хуже, поэтому спецификация кода и стиль кода могут быть неудовлетворительными. баллы, вы можете указать на улучшения, спасибо!
Ссылка на ссылку