# vue3基于网易云api模仿网易云音乐移动端

**Repository Path**: crazyeagle/music

## Basic Information

- **Project Name**: vue3基于网易云api模仿网易云音乐移动端
- **Description**: 基于网易云api模仿网易云音乐移动端，使用Vue3、vue-router、Vite、Pinia、TypeScript、Vant
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 19
- **Forks**: 2
- **Created**: 2022-08-10
- **Last Updated**: 2024-04-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 前言

功能没有完全实现，目前实现每日推荐、歌单、排行榜、电台、歌手、切换动画、歌曲控件及播放。该项目适配百分之95的手机屏幕。<br>

目前正在持续更新中。肝代码不易,随手点个Star再走呗

## 简介

当前使用技术：Vue3、Vite、TypeScript、Pinia，VueRouter、Vant、Swiper<br>

基于网易云api开发，模仿网易云移动端。运行该项目前请下载[网易云api](https://github.com/Binaryify/NeteaseCloudMusicApi)

## 使用说明

如果请求无数据，请查看请求地址与接口地址是否一致。目前歌曲只能通过排行榜、歌单、首页推荐歌曲进行播放

该项目仅供学习使用，不作商用

## 感谢

[Binaryify/NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi)

## 安装

````
git clone 仓库地址

npm install
````

## 运行

```
npm run dev
```
## 最新
## 最新更新

+ 新增关注页面：可以查看关注的好友或歌手动态以及自己分享的动态
+ 新增搜索页面：可搜索单曲、歌单、歌手
+ 新增评论：mv、歌单、单曲评论。回复评论，评论点赞
+ 新增分享：歌单、mv、节目、单曲、声音、日常
+ 新增收藏：可收藏单曲、歌单、电台、歌手
+ 新增歌词展示
+ 扫码登录
+ 解决退出登录无法生效问题



### 新增效果
| 关注页                                    |                                                  |
| -------------------------------------------------- | ------------------------------------------------ |
| ![image-20221003154747920](./readmeImage/image-20221003154747920.png) | ![tutieshi_372x670_15s](./readmeImage/guanz.gif) |

| 歌词                                 |                                                  |
| -------------------------------------------------- | ------------------------------------------------ |
| ![image-20221003160118248](./readmeImage/image-20221003160118248.png) | ![tutieshi_372x670_15s](./readmeImage/gec.gif)   |

| 分享                                                         |                                               |
| ------------------------------------------------------------ | --------------------------------------------- |
| ![image-20221003154614326](./readmeImage/image-20221003154614326.png) | ![tutieshi_372x670_15s](./readmeImage/fx.gif) |

| 评论点赞&回复                                                |                                               |
| ------------------------------------------------------------ | --------------------------------------------- |
| ![image-20221003154424146](./readmeImage/image-20221003154424146.png) | ![tutieshi_372x670_15s](./readmeImage/dz.gif) |

| 收藏&喜欢                                                    |                                               |
| ------------------------------------------------------------ | --------------------------------------------- |
| ![image-20221003154215994](./readmeImage/image-20221003154215994.png) | ![tutieshi_372x670_15s](./readmeImage/sc.gif) |


## 当前效果

> 采用视频转gif形式，动态效果图会有点卡顿。具体效果clone下来便知道啦！
### 用户主页&登录 
| 用户主页&登录                                      |                                                  |
| -------------------------------------------------- | ------------------------------------------------ |
| ![image-20220816125418495](./readmeImage/use.png)  | ![tutieshi_372x670_15s](./readmeImage/use.gif)   |
| ![image-20220816125903489](./readmeImage/sign.png) | ![tutieshi_372x670_16s](./readmeImage/sign1.png) |

> 登录需要在有官方注册过的账号,因为官方api原因现在只能扫码登录

### 首页

|                       首页                       |                                                |
| :----------------------------------------------: | :--------------------------------------------: |
| ![tutieshi_372x670_5s](./readmeImage/Home.png) | ![tutieshi_372x670_5s](./readmeImage/home.gif) |
### 排行  
| 排行 |  |
| --- | --- |
|![加载失败](./readmeImage/ranking.png)| ![tutieshi_372x670_6s](./readmeImage/ranking.gif) |
### 歌单
| 歌单 |  |
| --- | --- |
|![加载失败](./readmeImage/Sheet.png)| ![tutieshi_372x670_7s](./readmeImage/Sheet.gif) |
|![加载失败](./readmeImage/Sheet1.png)| ![tutieshi_372x670_7s (1)](./readmeImage/Sheet1.gif) |
### 电台
| 电台 |  |
| --- | --- |
|![加载失败](./readmeImage/radio.png)| ![加载失败](./readmeImage/radio.gif) |
### 歌曲
| 歌曲                                |                                                 |
| ----------------------------------- | ----------------------------------------------- |
| ![加载失败](./readmeImage/song.png) | ![tutieshi_372x670_15s](./readmeImage/song.gif) |
### 歌手
| 歌手                                            |                                                    |
| ----------------------------------------------------- | -------------------------------------------------- |
| ![image-20220816125418495](./readmeImage/singer.png)  | ![tutieshi_372x670_15s](./readmeImage/singer.gif)  |
| ![image-20220816125903489](./readmeImage/singer1.png) | ![tutieshi_372x670_16s](./readmeImage/singer1.gif) |
### MV和评论     
| MV和评论                                    |                                               |
| ------------------------------------------------ | --------------------------------------------- |
| ![image-20220816125418495](./readmeImage/mv.png) | ![tutieshi_372x670_15s](./readmeImage/mv.gif) |
| ![image-20220816125903489](./readmeImage/pl.png) | ![tutieshi_372x670_16s](./readmeImage/pl.gif) |



## 后续准备

换肤功能，性能优化，验证码登录
因为网易云api暂时只支持扫码登录，所以目前登录模块无法继续使用，后续会更新扫码登录