# Vue3.x 网易云音乐_PC音乐播放器

**Repository Path**: trtst/vue3-music

## Basic Information

- **Project Name**: Vue3.x 网易云音乐_PC音乐播放器
- **Description**: 基于Vue3 + Element UI开发的网易云音乐PC端项目，简单做了一下响应式处理，实现了登录、播放、收藏等功能。目前项目暂时已完成大部分功能，细节还待优化，其他功能还待开发。欢迎star...
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 223
- **Forks**: 55
- **Created**: 2022-01-21
- **Last Updated**: 2025-06-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Vuex, vue-router, vue3

## README

# vue3 网易云音乐

#### 前言

开头还是感谢 [网易云音乐 NodeJS 版 API](https://binaryify.github.io/NeteaseCloudMusicApi/#/)提供的API练练手。

目前已完成音乐网站的大部分功能，部分细节有可能需要优化调整，如果你有更好的想法实现或者发现了错误、抑或代码优化建议等等，可以留言，我会回复。你的订阅，就是我的动力。

欢迎 **watch** / **star** / **fork** ,一键三连。 :clap: 

 **Vue2.x版本** ：[基于网易云音乐API实现PC端音乐网站](https://github.com/trtst/vue_pc_music)


#### 项目预览

[trtst_PC_Vue_3.x_网易云音乐](https://m2.trtst.com)

#### 介绍

该项目是基于 Vue 和 ElementUI 组件库 搭建的一个PC端的音乐网站，能登录网易云音乐用户账号，听歌、评论、收藏等功能。

#### 项目安装


```
//首先你应当克隆该项目
git clone https://github.com/trtst/vue3-music.git
 
// 然后 安装项目依赖
npm install
 
// 接下来 部署服务端（二选一）
a) 克隆服务端项目并运行
b）部署服务端项目到Vercel
 
// 运行项目
npm run dev
```


#### 技术栈

Vue3 /
Vue-router /
Element-UI /
Axios /
Vuex /
Vite

#### 问题交流群
欢迎加群一起讨论：233725017

![加群：233725017](img/20220217112332.jpg)

#### 视频展示

1、[播放器](https://www.bilibili.com/video/BV173411a7MR)


#### 效果图预览展示

##### 首页

![首页](img/%E9%A6%96%E9%A1%B5.jpg)

##### 排行榜

![排行榜](img/%E6%8E%92%E8%A1%8C%E6%A6%9C.jpg)

##### 歌单列表页

![歌单列表页](img/%E6%AD%8C%E5%8D%95%E5%88%97%E8%A1%A8%E9%A1%B5.jpg)

##### 歌单详情页

![歌单详情页](img/%E6%AD%8C%E5%8D%95%E8%AF%A6%E6%83%85%E9%A1%B5.jpg)

##### MV列表页

![MV列表页](img/MV%E5%88%97%E8%A1%A8%E9%A1%B5.jpg)

##### MV详情页

![MV详情页](img/MV%E8%AF%A6%E6%83%85%E9%A1%B5.jpg)

##### 歌手列表页

![歌手列表页](img/%E6%AD%8C%E6%89%8B%E5%88%97%E8%A1%A8%E9%A1%B5.jpg)

##### 歌曲详情页

![歌曲详情页](img/%E6%AD%8C%E6%9B%B2%E8%AF%A6%E6%83%85%E9%A1%B5.jpg)

##### 右下角播放器

![右下角播放器](img/%E5%8F%B3%E4%B8%8B%E8%A7%92%E6%92%AD%E6%94%BE%E5%99%A8.jpg)


#### 项目页面功能完成列表

✅  首页 

✅  登录/退出登录

✅  排行榜

✅  歌单列表页

✅  歌单详情页

✅  MV列表页

✅  MV详情页

✅  歌手列表页

✅  专辑详情页

✅  歌曲播放

✅  播放条（有些细节还需要修改优化）

⬜️  评论留言点赞删除等

⬜️  歌手详情页

⬜️  搜索页面

⬜️  歌曲收藏

⬜️  个人主页


......