# vue-music

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

## Basic Information

- **Project Name**: vue-music
- **Description**: vue-music 音乐播放器
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 12
- **Created**: 2018-09-28
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-music

> A Vue.js project

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

[TOC]

## 项目准备工作 [第二章]
### 需求分析[2-1]
### vue-cli脚手架安装[2-2]
> 
> npm install vue-cli --save
> 
### 项目目录、图标字体、公共样式等资源准备 [2-3]
#### 修改目录
+ 删除src目录下的原目录 改为
+ src 
  + api
    + 放置后端请求相关的代码 [ajax、jsonp]请求
  + common => 通用的静态资源
    + fonts
    + image
    + js
    + stylus => 通用的样式文件
  + components
    + 通用组件
  + router
    + 路由
  + store
    + 存放vuex相关的代码

#### 安装stylus-loader、stylus、babel-runtime、fastclick、babel-polyfill

> 安装stylus 支持__stylus__语法
> 
> npm install stylus --save
> 
> npm install stylus-loader --save
> 
> babel-runtime 转译es6语法
> 
> fastclick 解决移动端点击300ms延迟的问题
> 
> 在main.js
> 
```
import fastclick from 'fastclick'

fastclick.attach(document.body)
```

> babel-polyfill 补丁，对es6一些api的转译
> 

## 页面基础骨架搭建 [第三章]
> 
> 项目入口文件m-header.vue的编写
> 
> 添加rank、recommend、search、singer、tab等页面
> 
> 在router文件夹里面的index.js里面设置路由
> 
> 在App.vue文件里面引入tab.vue
> 
> 在tab.vue里面设置顶部导航跳转
> 
> 

## 推荐页面制作 recommend.vue[第四章]
### 动态获取QQ音乐里面的数据 jsonp 
### JSONP原理 + 封装[4-2]
> [github地址](https://github.com/webmodules/jsonp)
> 
> 安装
> 
> npm install jsonp --save
> 
> 使用jsonp
> 
> common/js/jsonp.js
> 
### JSONP的应用 + 轮播图数据的抓取 [4-3]
```
src/common/js/jsonp.js
src/api/config
src/api/recommend.js

```

### 轮播图组件的实现[4-4]-[4-6]

> 新建src/base基础组件库
> 
> slider.vue
> 
> slot 插槽
> 
> 安装better-scroll
> 
> 浏览器视口发生改变时轮播图大小要发生改变
> 
```
  // 当视口宽度改变时轮播图大小进行改变
  window.addEventListener('resize', () => {
    if (!this.slider) {
      return
    }
    this._setSliderWidth(true)
    this.slider.refresh()
  })
},
```