# 网易云音乐3.0

**Repository Path**: keepyang/music_vue3

## Basic Information

- **Project Name**: 网易云音乐3.0
- **Description**: vue3 + pinia + vue-router + vite + vant-UI + scss
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-05-30
- **Last Updated**: 2024-08-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, vite, Pinia

## README

### 项目:`网易云音乐 App`


#### 项目启动时间:2024/05/30

##### 技术栈

vue3 + pinia + vue-router + vite + vant-UI + scss

##### 项目运行

```
git clone https://gitee.com/keepyang/music_vue3.git  

npm install

出错就用下面这条命令

npm i --legacy-peer-deps
```

##### 编译环境

```
npm run serve

访问 http://localhost:5173
```

##### 项目描述

> 网易云音乐是一款专注于发现与分享的音乐产品,依托专业音乐人、DJ、好友推荐及社交功能,为用户打造全新的音乐生活。

##### 主要模块

- [x] 首页模块 `Home.vue` -- 完成
- [x] 专辑页面 `AlbumArt.vue` -- 完成
- [x] 歌曲播放页面 `Play.vue` -- 完成
- [x] 歌手信息页面 `SingerDetails.vue` -- 完成
- [x] 歌单页面 `SongList.vue` -- 完成
- [x] 用户页面进入歌单页面--显示所有歌曲 `SongLists.vue` -- 完成
- [x] 跳转中间页面 `TransferStop.vue` -- 完成
- [x] 用户信息页面 `UserInfo.vue` -- 完成
- 组件
- [x] 搜索回车显示的歌手/专辑/歌单组件 `AlbumView.vue` -- 完成
- [x] 首页卡片组件 `CardView.vue` -- 完成
- [x] 评论区组件 `CommentView.vue` -- 完成
- [x] 抽屉组件 `DrawerView.vue` -- 完成
- [x] 热歌榜 `HitSongList.vue` -- 完成
- [x] 置顶组件 `Lstop.vue` -- 完成
- [x] 歌曲列表组件 `MusicList.vue` -- 完成
- [x] 搜索页面歌曲的展示组件 `SearchSongsList.vue` -- 完成
- [x] 搜索页面组件 `SearchView.vue` -- 完成
- [x] 用户页面卡片组件 `UserCard.vue` -- 完成
- [x] 用户页面卡片组件2 `UserCards.vue` -- 完成

##### 项目布局

```
|-- public                           // 公共文件
|   |-- favicon.ico                  // 页面左上角小图标
|   |-- index.html                   // 入口html文件
|-- src                              // 源码目录
|   |-- assets                       // 各种图片文件
|   |-- router                       // 路由配置
|   |-- components                   // 各种组件文件
|       |-- AlbumView.vue            // 搜索回车显示的歌手/专辑/歌单组件
|       |-- CardView.vue             // 首页卡片组件
|       |-- CommentView.vue          // 评论区组件
|       |-- DrawerView.vue           // 抽屉组件
|       |-- HitSongList.vue          // 热歌榜
|       |-- Lstop.vue                // 置顶组件
|       |-- MusicList.vue            // 歌曲列表组件
|       |-- SearchSongsList.vue      // 搜索页面歌曲的展示组件
|       |-- SearchView.vue           // 搜索页面组件
|       |-- UserCard.vue             // 用户页面卡片组件
|       |-- UserCards.vue            // 用户页面卡片组件2
|   |-- router                       // 路由配置
|       |-- index.js
|   |-- store                        // pinia的状态管理
|       |-- index.js
|	  |-- utils                 	     // 各种样式方法
|       |-- common.js                // 通用方法
|       |-- dedicated.js             // 专用方法
|       |-- request.js               // 二次封装axios
|	  |-- views                        // 各种页面文件
|       |-- Home.vue                 // 首页
|       |-- AlbumArt.vue             // 专辑页面
|       |-- Play.vue                 // 歌曲播放页面
|       |-- SingerDetails.vue        // 歌手信息页面
|       |-- SongList.vue             // 歌单页面
|       |-- SongLists.vue            // 用户页面进入歌单页面--显示所有歌曲
|       |-- TransferStop.vue         // 跳转中间页面
|       |-- UserInfo.vue             // 用户信息页面
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- .gitignore                       // 忽略的文件
|-- babel.config.js                  // ES6语法编译配置
|-- package.json                     // 项目及工具的依赖配置文件
|-- README.md                        // 说明
|-- vite.config.js                   // vue配置文件
```

#### 项目完成时间:2024/06/04

## `END`