facebesidewyj/cool-music

:musical_note:A music app based on Vue

Cool Music

 

项目简介

入坑 Vue 以来，一直苦没有真正的实战项目来提升自己，所以在工作之余开发了一个基于 Vue2.0+版本的音乐 WebAPP。项目构建初期也在 github 上参考了众多案例，通过学习并阅读他人的成熟代码进而提升自己，历时一个半月完成了 Cool Music 这个项目。我希望把这个项目的源代码开放出来，来帮助更多的前端爱好者们，大家共同进步，共同提升。

技术栈

1. Vue 相关：Vue、Vue-router、Vue-lazyload。
2. 脚手架：Vue-cli。
3. 状态管理：Vuex。
4. 构建工具：Webpack。
5. CSS 预处理：Less。
6. 移动端插件：better-scroll、fastclick。
7. 数据获取：axios。
8. 代码风格规范工具：ESLint。
9. JavaScript 语法标准：ECMAScript 2015。
10. 动画相关：create-keyframe-animation。
11. 本地存储：Store.js

实现的功能

1. 轮播图功能的实现。
2. 歌单、歌曲列表的展现。
3. 音乐的播放、暂停、快进、快退和同步歌词的实现。
4. 歌手列表通讯录的实现。
5. 搜索功能、热门搜索和保存历史记录功能的实现。
6. 收藏歌曲，个人相关功能的实现。
7. 上拉加载，页面侧滑。播放器收起和弹出等动画的实现。

构建步骤

# 安装依赖库
npm install

# 启动webpack内置服务
npm run dev

# 项目构建
npm run build

# 生产打包并查看报告
npm run build --report

项目预览

写在最后

如果大家觉得还行，能否帮忙 Star 下？

😘😘😘