# 网易云音乐

**Repository Path**: mxchen-team/netease-cloud-music

## Basic Information

- **Project Name**: 网易云音乐
- **Description**: 用于Vue练习且学习的网易云音乐项目
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-07-21
- **Last Updated**: 2023-01-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 网易云音乐
## 准备工作
### 接口测试工具
ApiFox

![image-20220721201424778](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/image-20220721201424778.png)

### 网易云API

#### 博客参考

![image-20220721203054408](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/image-20220721203054408.png)

[(130条消息) 网易云音乐API 安装及部署 全过程【本地跑项目以及远端部署 均详解】_翼遥bingo的博客-CSDN博客_网易云音乐api](https://blog.csdn.net/hannah2233/article/details/122266099))

#### 博主部署地址

```
https://netease-cloud-music-api-crete722p-hannah-bingo.vercel.app/
```

### 网易云网站学习参考

![image-20220721210006455](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/image-20220721210006455.png)

### git命令

```
git clone 

git add . 

git commit -m '提交内容'

git push origin master

git push -f origin master
 
git pull origin master

清除git缓存
git rm -r -f --cached . 

提交规范内容命令 使用前 先git add . 否则会报错
git cz
```

### 提交内容规范

[(130条消息) git提交规范，规范自己的提交标准_该走的弯路，一步都不会少。的博客-CSDN博客_git 提交规范](https://blog.csdn.net/weixin_44292923/article/details/124317911?ops_request_misc=%7B%22request%5Fid%22%3A%22165840978216781432950986%22%2C%22scm%22%3A%2220140713.130102334..%22%7D&request_id=165840978216781432950986&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-1-124317911-null-null.142^v33^pc_rank_34,185^v2^control&utm_term=git提交内容规范&spm=1018.2226.3001.4187)

![image-20220721212643771](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/image-20220721212643771.png)

## 依赖安装
### cz-cli

```
npm i -g commitizen@4.2.4

npm i cz-customizable@6.3.0 --save-dev


```
### vue-router
```
npm install vue-router@3 
```

### element-ui
```
npm install element-ui

```

### less预处理器
```
npm install less
npm install less-loader

```
## 效果图

##### 首页

![首页](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/163430_c2da37db_5120464.jpeg "QQ截图20201224152145.jpg")

##### 排行榜

| ![排行榜](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/092746_2e140041_5120464.jpeg "2.jpg") | ![排行榜](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/092814_52737571_5120464.jpeg "3.jpg") |
| ------------------------------------------------------------ | ------------------------------------------------------------ |

##### 歌单

| ![歌单](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/093013_264824fb_5120464.jpeg "4.jpg") | ![歌单](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/093032_cefc8d73_5120464.jpeg "5.jpg") |
| ------------------------------------------------------------ | ------------------------------------------------------------ |

##### MV

![MV](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/093135_e869c69a_5120464.jpeg "6.jpg")

##### 歌手

![歌手](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/093144_60040566_5120464.jpeg "7.jpg")

##### 我的音乐

![我的音乐](https://images.gitee.com/uploads/images/2020/1225/093207_bccde829_5120464.jpeg "8.jpg")

##### 登录弹窗

![登录弹窗](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/093223_de8de155_5120464.jpeg "9.jpg")

##### 歌曲详情页

| ![歌曲详情页](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/093240_bce77a3f_5120464.jpeg "10.jpg") | ![歌曲详情页](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/093304_9a06a493_5120464.jpeg "11.jpg") |
| ------------------------------------------------------------ | ------------------------------------------------------------ |

##### 播放条 歌词及 播放列表

| ![播放条](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/093327_99320e52_5120464.jpeg "12.jpg") | ![播放条](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/093347_752fdf20_5120464.jpeg "14.jpg") |
| ------------------------------------------------------------ | ------------------------------------------------------------ |

##### MV详情页

| ![MV详情页](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/093409_025ddee1_5120464.jpeg "15.jpg") | ![MV详情页](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/093421_82c81e7e_5120464.jpeg "16.jpg") |
| ------------------------------------------------------------ | ------------------------------------------------------------ |

##### 搜索结果页

![搜索结果页](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/093440_b454d735_5120464.jpeg "17.jpg")

##### 歌手详情页

![歌手详情页](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/093501_17a2a07d_5120464.jpeg "12.jpg")