# vue-music

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

## Basic Information

- **Project Name**: vue-music
- **Description**: vue全家桶实现的仿QQ音乐的移动端webapp
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 3
- **Created**: 2019-07-11
- **Last Updated**: 2022-05-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# YZG

> 基于vue全家桶仿QQ音乐的webapp

## 项目构建步骤

```bash
# 安装依赖包
npm install

# 项目运行
npm run dev

# 项目打包
npm run build
```

## 基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Stylus + ES6 等开发一款移动端音乐 WebApp，UI 界面参考了安卓版的QQ音乐、flex 布局适配常见移动端。

## 进度图预览

> 推荐页
> ![recommend](src/doc/recommend.png)
> 歌手页
> ![singer](src/doc/singers.png)
> 歌手播放列表页
> ![playlist](src/doc/playlist.png)
> 播放器
> ![player](src/doc/player.png)
> 小播放器
> ![playerMini](src/doc/playermin.png)

开发目的
----

**通过学习开发一个 Vue 全家桶项目，让自己更熟练的使用 Vue 全家桶、模块化开发、ES6 等等知识，提高自己的技术能力**

**前端**

* `Vue`：用于构建用户界面的 MVVM 框架
* `vue-router`：为单页面应用提供的路由系统，使用了 `Lazy Loading Routes` 技术来实现异步加载优化性能
* `vuex`：Vue 集中状态管理，在多个组件共享某些状态时非常便捷
* `vue-lazyload`：实现图片懒加载，节省用户流量，优化页面加载速度
* `better-scroll`：解决移动端各种滚动场景需求的插件，使移动端滑动体验更加流畅
* `SCSS`：css 预编译处理器
* `ES6`：ECMAScript 新一代语法，模块化、解构赋值、Promise、Class 等方法非常便利好用
* `vue-axios`：用来请求后端 API 音乐数据
  
  **其他工具**
* `vue-cli`：Vue 脚手架工具，快速初始化项目代码
* `eslint`：代码风格检查工具，帮助我们规范代码书写
* `iconfont`：阿里巴巴图标库
* `fastclick`：消除 click 移动浏览器 300ms 的延迟
* `webbpack`:代码打包编译工具
* `npm`：包管理工具
  
  ## 实现功能
  
  播放器内核(歌词显示待完成)、推荐页面、歌手页面、歌手详情(未完待续)
  
  ### 推荐页面
  
  推荐页分成三个部分，分别是 banner 轮播图、热门歌单、数据都是使用 `axios或者jsonp` 请求 API 获取得到的，图片都使用 `vue-lazyload` 实现懒加载。

轮播图：使用 `better-scroll` 实现

### 歌手页面

歌手列表左右联动(实现挺复杂，具体看代码有注释)

### 歌手详情页

通过歌手的id来获取歌单数据

### 播放器

最重要的组件
现在已经实现的功能暂停，上下曲切换,播放模式(单曲循环，顺序播放，随机播放)