Skip to content

This music WebApp is built by Vue 2.x、Vuex、Vue-Router、ES6 、Webpack and Stylus.

Notifications You must be signed in to change notification settings

GetWang/vue-music-app

Repository files navigation

vue-music-app

在线演示:Vue 移动端音乐 WebApp

Description

  • 使用Vue 2.xVuexVue-RouterES6WebpackStylus技术栈。其中 Webpack 的大部分配置使用vue-cli脚手架完成。

  • 该应用的UI基本仿照移动端QQ音乐的用户界面,实际体验非常逼近移动端原生音乐类 App。

  • 开发过程中,封装了较多的组件——基础组件(如进度条组件、滚动组件 、弹窗组件、通讯录列表组件)、业务组件(歌手页面组件、播放器内核组件、排行榜页面组件、用户中心页组件)。

  • 项目中使用了一些 ES6 语法和 API,如Promise;通过HTML5的本地存储 API localStorage保存用户的播放历史、收藏歌曲,也使用到关于Audio的一些 API;App 中关于播放器的交互动画使用CSS3实现。

  • 应用的数据均抓取自QQ音乐的线上真实数据,使用axiosjsonp库发起跨域请求。 使用滚动库better-scroll实现 App 中的轮播图以及页面的滚动;借助 Vue 插件-vue-lazyload完成图片的懒加载。

  • 歌词数据的解析使用到三方库js-base64lyric-parser

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

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

About me