facebesidewyj / cool-music

:musical_note:A music app based on Vue

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cool Music

 Build Status node npm Webpack Vue Vuex axios better-srcoll

facebesidewyj's github stats

项目简介

入坑 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 下?

😘😘😘

About

:musical_note:A music app based on Vue


Languages

Language:Vue 61.1%Language:JavaScript 35.8%Language:CSS 2.9%Language:HTML 0.2%