lee66/v-ncmusic

Vue2的网易云音乐WebApp ， a vue project base on Vue && 163music API

v-ncmusic

一个基于vue2的网易云音乐移动web版

a vue project base on Vue && 163music API

在线版

预览地址

歌单列表

歌单详情

工具&技能

vue + vuex+ vue-router

sass + weui 纯css 并没有用到现成的一些开源组件库。

http-proxy-middleware 伪造请求头  

公共组件

• 公共header
• 公共footer - [x] v-loading 加载提示组件
• v-infiniteScroll 无限滚动组件  

目前实现功能

歌单

• 精品歌单
• 歌单详情

用户

• 登录 （仅dev环境可用）

播放音乐

• 本地缓存播放状态
• 播放
• 暂停

歌单

• 播放

TODO 即将开放

音乐播放

• 上一曲
• 下一曲
• 进度控制
• 音量控制

音乐搜索

输入搜索关键词，回车键搜索，或者点击放大镜图标

• 单曲(单击或双击歌曲添加至音乐播放列表，部分音乐会存在版权问题无法播放)
• 歌手
• 专辑
• MV
• 歌单(左键点击进入歌单列表)
• 主播电台 (单期节目部分单击或双击歌曲添加至音乐播放列表，目前不存在版权问题)
• 用户

播放列表

• 切歌(单击切歌)
• 删歌(鼠标悬浮在要删除的歌曲上，点击右侧小X)
• 清空播放列表
• 本地缓存播放列表

一些注意事项

项目中使用了官方的接口，需要使用http-proxy-middleware进行转发，开发环境下需要在config/index.js中的dev中添加下列配置即可，注意：使用官方api的功能线上不可用，如登录功能。

proxyTable: {
  '/api': {
      target: 'http://music.163.com',
      changeOrigin: true,
      headers: {
          Referer: 'http://music.163.com/'
      }
  }
}

RECENT

• before May ——搭建项目框架，主要是fetch封装与vue-router的配置。
• 0501-0506 ——搭建Sass的开发环境，编写主框架的样式
• 0506 —— 更新songList与无限滚动指令。
• 0507 —— debounce完善infiniteScroll指令（已升级为组件）
• 0508 —— 歌单页（专辑页）的样式开发。
• 0522 —— 一直没有时间更新文档，增加了v-loading,v-infiniteScroll 组件，增加生产环境的api地址（感谢各位大牛的贡献）。对VUEX进行大幅度的修改。  

Build Setup

# 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 detailed explanation on how things work, checkout the guide and docs for vue-loader.

前期开发的API来自网易云音乐官方，感谢Binaryify的整理

后期统一替换为线上环境的API，感谢journey-ad,java Swing,提供在线的API地址供使用。