# vue-music

**Repository Path**: luabu/vue-music

## Basic Information

- **Project Name**: vue-music
- **Description**: vue+ElementUI实现网易云pc端
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-10-15
- **Last Updated**: 2023-02-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Vuex

## README

# vue-music

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```
后端接口项目 GitHub 地址
https://github.com/Binaryify/NeteaseCloudMusicApi 开发时对应版本：4.0.23 若出现问题则选择最新版本

### 使用的技术栈

- Vue

    vue-router
    vue-lazyload
    Vuex 等全家桶

- 网络请求

    axios
    nprogress 加载提示

- element-ui
- 自定义封装的音乐播放器
- ES6 Async await 等JS语法

### 目前完成功能


- 歌曲播放器：播放、拖动进度、音量调整、下载、播放列表，歌曲页歌词滚动、评论
- 发现页：推荐、歌单、歌手、排行榜、最新音乐（新歌速递、新碟上架（本周新碟））
- 登录：手机号密码登录，二维码登录，验证码登录，退出登录
- 歌曲列表：喜欢音乐，专辑入口，歌手入口，当前播放音乐行

- 各详情页

- 歌单详情页：歌曲列表、歌单页搜索、加载完整歌单、收藏、评论
- 专辑详情页：歌曲列表、搜索、收藏、评论、专辑详情
- 歌手详情页：专辑列表、歌手描述、MV、相似歌手
- 视频详情页：视频播放（使用原生 video 及控件播放）、相似视频推荐、 MV 播放、MV 推荐，点赞、收藏、评论、关注创作者
- 用户详情页：基本信息、地区（仅支持国内地区）、创建的歌单、收藏的歌单、更新个人信息和头像
- 搜索：歌曲、歌手、歌单、用户、MV、专辑搜索、热搜榜、搜索建议、搜索结果快捷入口
- 评论（需要登录）：点赞、回复、评论、评论分页、及页码跳转和回复跳转输入框的动画
- 视频（需要登录）：视频列表、MV 列表、全部 MV 页、MV 排行页
- 我的收藏（需要登录）：收藏的专辑、MV、歌手及筛选功能
- 最近播放（本地存储，不是云端的播放记录）
- 私人 FM（需要登录）：播放、垃圾桶，喜欢、评论、歌词滚动(这里表现不太与网易云一样，如果想要一致需要改很多)
- 全部页面移动端适配
- 路由懒加载及代码分块，添加未登录情况下导航守卫，路由 props 解耦合
- 使用 Vuex 管理登录状态、当前歌曲列表及歌曲状态、其余多组件状态
- 分享的接口为分享到网易云动态，因还没有做动态部分，所有分享是无效的，收藏全部歌曲按网易云的表现是收藏到某个创建的歌单或者创建新歌单，暂未加入

![首页](%5D%604E2FDS0Y@~4K(%7B%60I9GT%7B8.png)
![专辑](5%60K%5BAFF~W786J%7BBHKG6HO%5BK.png)
![推荐](QQ%E6%88%AA%E5%9B%BE20230219152119.png)
![歌单](QQ%E6%88%AA%E5%9B%BE20230219152210.png)
![最新音乐](QQ%E6%88%AA%E5%9B%BE20230219152316.png)
![播放器](QQ%E6%88%AA%E5%9B%BE20230219152404.png)
![登录](QQ%E6%88%AA%E5%9B%BE20230219152814.png)