/Vue-NeteaseCloud-WebMusicApp

Vue高仿网易云音乐，基本实现网易云所有音乐、MV相关功能，现已更新到第二版，仅用于学习，下面有详细教程。

Primary LanguageVueApache License 2.0Apache-2.0

前言

肝代码不易，若是在网上发表请标明出处，另外请路过的朋友们随手点个Star。本项目仅用于学习。

Github地址

项目介绍

项目参考于网易云音乐PC版app，基本实现官方音乐播放、MV播放所有功能

项目目前共四个分支：

----master  //主分支,第二版代码

----version1  //第一版代码，写第一版时自己还很菜，所以可能很多地方不够友好
    项目技术栈：vue+vuex+vue-router+axios+better-scroll

----version2  //第二版代码
    亮点：支持三种主题颜色，页面更友好，对不同尺寸屏幕也做了一定兼容，内部代码相较于第一版也有比较大的优化
    技术栈：vue+vuex+vue-router+axios+element-ui+vbest-ui(自己封装的组件库)+postcss-pxtorem+vue-lazyload

----dev-player  //正在开发中，目标是封装一个独立的音乐播放器
    技术栈：react+ts+hooks+mobx+antd

后端API

本项目后端所有数据来自开源项目NeteaseCloudMusicApi，下面附有后端开源项目地址、文档

后端API仓库地址

API文档

运行项目

  1. 运行后端仓库

    1.1. git clone 后端仓库地址

    1.2. cnpm install

    1.3. node app

  2. 运行本仓库代码

    2.1. git clone 本仓库地址

    2.2. cnpm install

    2.3. npm run serve

问题交流群

欢迎加群一起讨论

输入图片说明

项目效果预览

theme

light主题 light主题 dark主题 输入图片说明 green主题 green主题

歌单

歌单 输入图片说明 歌单 输入图片说明 歌单 输入图片说明

排行榜

排行榜 输入图片说明 排行榜 输入图片说明 排行榜 输入图片说明

歌手 & 歌手详情

歌手详情-生平简介 输入图片说明 相似歌手 输入图片说明 歌手 输入图片说明
歌手 输入图片说明 歌手详情 输入图片说明 歌手MV输入图片说明

MV & MV播放

MV 输入图片说明 MV排行榜 输入图片说明 全部MV 输入图片说明
MV播放页面 输入图片说明 MV播放 输入图片说明 MV播放 输入图片说明

播放器

播放器 输入图片说明 播放器 输入图片说明 播放器输入图片说明

搜索

热搜列表 输入图片说明 搜索建议 搜索详情 输入图片说明

其他

其他页面效果请参考version1分支，因为上传图片要求不能超过2M，太麻烦我就不一一上传了