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

Posted 2021-01-09 今天代码写完了吗?

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] 播放列表
-[] 歌曲评论
-[ ] 搜索推荐
-[ ] 搜索分类