码迷,mamicode.com
首页 > Web开发 > 详细

[个人项目] 使用 Vuejs 完成的音乐播放器

时间:2018-10-01 20:41:42      阅读:365      评论:0      收藏:0      [点我收藏+]

标签:ejs   http   修改   学习   矢量图   com   icon   个人项目   project   

Foreword

虽然音乐播放这类的项目的静态展示居多,业务逻辑并不复杂,但是对于我这种后端出身的前端萌新来说,能使用vuejs完成大部分功能, 也会有许多收获。

api:我使用的是一个开源的 nodejs 封装的网易云音乐 api,名叫NeteaseCloudMusicApi
文档地址
github地址
感谢大佬提供的学习资源.
我的项目地址

Project Preview

技术分享图片
技术分享图片
技术分享图片

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

Technology stack

  1. Vuejs - The Progressive JavaScript Framework
  2. axios - Promise based HTTP client for the browser and node.js
  3. Vuex - Vuex is a state management pattern + library for Vue.js applications.
  4. scss - Syntactically Awesome Style Sheets
  5. flexible - Alibaba Mobile adaptation scheme
  6. px2remLoader - Change ‘px‘ to ‘rem‘
  7. better-scroll - It‘s a plugin which is aimed at solving scrolling circumstances on the mobile side
  8. Vue-Lazyload: Vue module for lazyloading images in applications
  9. iconfont - 阿里巴巴矢量图标库

预计完成的功能

-[x] 首页歌单推荐
-[x] 歌单详情
-[x] 播放器 50%
-[x] 播放暂停
-[x] 播放模式切歌(顺序和随机)
-[ ] 歌词滚动(待修改)
-[ ] 歌曲拖动
-[x] 播放底栏
-[ ] 底栏歌词同步
-[x] 播放列表
-[] 歌曲评论
-[ ] 搜索推荐
-[ ] 搜索分类

[个人项目] 使用 Vuejs 完成的音乐播放器

标签:ejs   http   修改   学习   矢量图   com   icon   个人项目   project   

原文地址:https://www.cnblogs.com/liuyishi/p/9735498.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!