项目介绍

项目参考于网易云音乐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,下面附有后端开源项目地址、文档

运行项目
  1. 运行后端仓库

1.1. git clone 后端仓库地址

1.2. cnpm install

1.3. node app

2.运行本仓库代码

2.1. git clone 本仓库地址

2.2. cnpm install2.3. npm run serve

项目效果预览theme

light主题

vue网易云歌单案例(vue高仿网易云音乐)(1)

dark主题

vue网易云歌单案例(vue高仿网易云音乐)(2)

green主题

vue网易云歌单案例(vue高仿网易云音乐)(3)

歌单

歌单

vue网易云歌单案例(vue高仿网易云音乐)(4)

歌单

vue网易云歌单案例(vue高仿网易云音乐)(5)

歌单

vue网易云歌单案例(vue高仿网易云音乐)(6)

排行榜

排行榜

vue网易云歌单案例(vue高仿网易云音乐)(7)

排行榜

vue网易云歌单案例(vue高仿网易云音乐)(8)

排行榜

vue网易云歌单案例(vue高仿网易云音乐)(9)

歌手 & 歌手详情

歌手详情-生平简介

vue网易云歌单案例(vue高仿网易云音乐)(10)

相似歌手

vue网易云歌单案例(vue高仿网易云音乐)(11)

歌手

vue网易云歌单案例(vue高仿网易云音乐)(12)

歌手

vue网易云歌单案例(vue高仿网易云音乐)(13)

歌手详情

vue网易云歌单案例(vue高仿网易云音乐)(14)

歌手MV

vue网易云歌单案例(vue高仿网易云音乐)(15)

MV & MV播放

MV

vue网易云歌单案例(vue高仿网易云音乐)(16)

MV排行榜

vue网易云歌单案例(vue高仿网易云音乐)(17)

全部MV

vue网易云歌单案例(vue高仿网易云音乐)(18)

MV播放页面

vue网易云歌单案例(vue高仿网易云音乐)(19)

MV播放

vue网易云歌单案例(vue高仿网易云音乐)(20)

MV播放

vue网易云歌单案例(vue高仿网易云音乐)(21)

播放器

播放器

vue网易云歌单案例(vue高仿网易云音乐)(22)

播放器

vue网易云歌单案例(vue高仿网易云音乐)(23)

播放器

vue网易云歌单案例(vue高仿网易云音乐)(24)

搜索

热搜列表

vue网易云歌单案例(vue高仿网易云音乐)(25)

搜索建议

vue网易云歌单案例(vue高仿网易云音乐)(26)

搜索详情

vue网易云歌单案例(vue高仿网易云音乐)(27)

源码地址:https://gitee.com/fudaosheng/Vue-NeteaseCloud-WebMusicApp

,