Высокая имитация NetEase Cloud Music (экземпляр Vue) — битва Vue

Vue.js

предисловие

При непрерывном изучении Vue необходимо сделать небольшой проект и получить больше знаний в процессе реализации проекта. С сегодняшним спросом на музыку увеличивается использование мобильных терминалов.Проект написан и реализован на Vue и полностью заимствован.Облачный музыкальный мобильный терминал NeteaseРеализация дизайна и функций пользовательского интерфейса и стремление добиться эффекта подделки. Я начал работать над ним несколько дней назад, и пока он практически не используется.

Этот проект был задуман сам по себе, и программа исследовалась независимыми людьми.

Примечание. Этот проект является сугубо личным, выберите его для обычного использования.Официальный представитель NetEase Cloud Musicклиент.

Цели проекта

Полная реализация функций NetEase Cloud Music на мобильном терминале

Проект все еще находится в стадии подготовки

Последнее обновление (2019-12-4): Исправить страницу входа в систему не может вернуть ошибку

Последнее обновление (2019-12-5):настройка времени ожидания запроса axios

обновление новой версии

  • Информация о версии: 2.4.8-> 2.8.10
  • время:7 декабря 2019 г.
  • обновить содержимое:
    • Добавить раскрывающееся меню «Обновление + световая подсказка» на странице обнаружения
    • Увеличьте анкорный список на странице рейтинга радио
    • Увеличьте 24-часовой список в списке программ на странице рейтинга радио.
    • Увеличьте список платных бутиков в списке радио на странице рейтинга радио
    • Исправить страницу входа в систему не может вернуть ошибку
    • Исправление других известных проблем
    • Оптимизировать структуру

Посмотреть исторические версии

Если у вас есть какие-либо вопросы или предложения по использованию, добро пожаловать в выпуск!

Этот проект постоянно улучшается, подождите и посмотрите~

стек технологий

основная зависимость

  • Сегмент семейства Vue (используйте Vue-cli в качестве инструмента сборки)
  • WebPack4.0
  • ES6
  • Less
  • ESLint
  • Vant UI
  • API облачной музыки NetEase

Демонстрация эффекта

Нажмите, чтобы увидеть эффектПосмотреть эффект[Лучше использовать браузер Chrome]

целевая функция

  • Мобильный вход и регистрация
  • изменить пароль
  • Информация о плейлисте на моей странице
  • Добавить, удалить список песен
  • Недавно играл
  • Кардиорежим
  • мое радио
  • моя коллекция
  • Найдите рекомендуемый плейлист на странице
  • найти страницу новый диск
  • Откройте для себя новые песни на странице
  • Откройте для себя ежедневные рекомендации страницы
  • найти плейлист на странице
  • Площадь плейлиста
  • Рекомендация новой песни
  • еще новые диски
  • Откройте для себя рейтинги страниц
  • Откройте для себя страницу Радио
  • видео страница
  • страница друзей
  • выход
  • Откройте для себя страницу Частное FM
  • Функция поиска
  • Отображение результатов поиска
  • Горячий список поиска
  • запись истории
  • Поиск рекомендуется
  • Певица Категория
  • Функция воспроизведения (Небольшой индикатор прогресса игрока)
  • плейлист
  • Добавить удалить плейлист
  • войти
  • Нравится песня или нет
  • сборник альбомов или нет
  • Обзоры плейлистов
  • обзор альбома
  • Нравится, присылайте, удаляйте комментарии
  • обзоры радиопередач
  • видео обзор
  • Связанный пользователем
  • загрузка прокрутки страницы
  • Проведите пальцем влево и вправо, чтобы переключиться
  • анимация переключения страниц
  • Оценка статуса входа
  • Полностью оптимизирован и исправлен

Частичный скриншот

Сторона Центра учета

uDnX80.png
Связанные с радио
K6TwqA.gif
K6TaKH.gif
видео страница
K6TNxe.gif
Откройте для себя страницы и ежедневные рекомендации
uDuYM8.gif
Плейлист и сведения о плейлисте
uDuGxf.gif
Списки лидеров и информация о списках лидеров
uDu3Gt.gif
Мои страницы и недавно воспроизведенные
uDu1PI.gif
Мой плейлист и пьесы песни
uDutsS.gif
дисплей поиска
uDu8RP.gif

Шаги запуска

Нажмите, чтобы просмотреть исходный кодПосмотреть исходный код

  1. npm install
  2. npm run dev (本地开发)
  3. npm run build (生产环境打包)

Макет проекта

.src
+-- api
|   +-- config.js // 存取相关的api地址
|   +-- index.js // 请求相关的api方法
+-- assets
|   +-- styles
    |   +-- border.css // 移动端的1px边框
    |   +-- global.less // 全局应用样式
    |   +-- reset.css // 重置样式
    |   +-- resetEleUI.less // 修改elementUI组件样式
|   +-- utils // 全局要使用的方法
    |   +-- getPhone // 获取手机号码
    |   +-- modalScroll // 处理移动端滚动条
|   +-- Bus.js // Bus 总线
|   +-- Mixins.js // 混入(mixin)
+-- base // 存取页面公共的小组件
    +-- albumPage // 歌单展示页面组件
    +-- songListPage // 展示歌曲列表
    +-- alert // 提示消息
    +-- audioAllTitle // 播放全部标题行
    +-- button // 登陆页面按钮
    +-- djSublistCard // 类似于我的电台页面的长卡片组件
    +-- generalNav // 通用页面顶部的标题行
    +-- icon // 图标展示
    +-- idxCard // 官方排行榜
    +-- imgCard // 歌单的图片卡
    +-- interchangeable // 用来展示搜索展示页面除单曲以外的项目
    +-- loading // 转圈loading
    +-- pageErrorInfo // 出错提醒
    +-- pageErrorLoading // 页面加载loading
    +-- searchInput // 搜索框
    +-- slider // 播放列表滑块
    +-- sliderNav // 滑动标题
    +-- song // 歌曲项
    +-- titleFooter // 搜索展示页综合页面各项通用头和尾
+-- getInfos // 获取一些静态信息
    +-- getData // 获取静态信息方法
    +-- icon // 存取图标信息
+-- pages // 项目路由页面
+-- router // 路由配置
    +-- index
+-- store // vuex 配置使用
    +-- action // 根级别的 action
    +-- getter // 根级别的 getter
    +-- index // 组装模块并导出 store 的地方
    +-- mutation-types // 根级别的 mutation-types
    +-- mutation // 根级别的 mutation
    +-- state // 根级别的 state

Посмотреть исходный кодДобро пожаловать звезда, приветственный вопрос

На более позднем этапе я обновлю ямки, возникшие при разработке проекта, новые полученные знания, новые методы и т.д. Добро пожаловать, чтобы следовать

Этот проект будет обновляться в течение длительного времени, все желающие могут указать на проблемы и учиться вместе.

Надеюсь, она будет вам полезна и вдохновила после прочтения этой статьи.Если есть какие-то недочеты, прошу покритиковать и исправить!

Добро пожаловать, чтобы следовать за мнойличный блогПоделитесь некоторыми передовыми технологиями, вопросами интервью, навыками интервью и т. д.

Я много работал над организацией в течение долгого времени, и я надеюсь вручную поставить лайк и поощрить ~

Категории