用 Vue 开发一个音乐 app

vue-music

基于 Vue 包括音乐推荐、搜索、播放、榜单、收藏

欢迎体验：neveryu.github.io/vue-music/，在手机上效果更好，微信扫码体验：

简介

本项目是基于 vue2.4.1 最新的实战项目，vue-cli2.9.3 + vue2.4.1 + axios + vue-router3.0.1 + es6 + vux3.0.1 + webpack + better-scroll + 线上真实接口的一个移动端音乐 app。

实现的功能

一、音乐列表、歌单、歌手、排行、榜单、推荐 二、音乐播放、暂停、上一曲、下一曲、喜欢 三、播放列表、添加到播放列表、历史列表 四、搜索单曲、歌手、专辑、MV 五、查看歌手页面、专辑页面、MV 六、热门搜索 七、搜索历史记录 八、排行榜 九、切换播放模式 十、歌词 十一、我的中心 十二、项目介绍

如今最流行的开发方式就是先后分离了 vue 也是如今最流行的前端框架之一。

截屏演示

移动端演示

扫二维码在手机上查看效果更好

项目代码

github.com/Neveryu/vue…

构建

# 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

# run local server
npm run prod.server.js
复制代码

Tip

# 若是 npm install 长时间没有反应或者安装失败，请尝试
npm install --registry=https://registry.npm.taobao.org
复制代码

详细

vue 有本身的脚手架构建工具 vue-cli 。使用起来很是方便，使用 webpack 来集成各类开发便捷工具，好比：

• 代码热更新，修改代码以后网页无刷新改变，对前端开发来讲很是的方便
• Postcss，不再用去管兼容性的问题了，只针对 chrome 写 css 代码，会自动编译生成支持多款浏览器的 css 代码
• ESlint，统一代码风格
• bable，ES2015 出来已经有一段事件了，可是很多浏览器尚未兼容 ES6。有了 bable，放心使用 ES6 语法，它会自动转义成 ES5 语法
• Stylus，相似于 sass/scss ，可是能够不写 { } 和 :，使用起来仍是很方便的
• better-scroll，很好用的移动端各类滚动场景需求的插件（已支持PC）
• vuex，Vuex是一个专为 Vue.js 应用程序开发的状态管理模式
• vue-router，专为 Vue.js 应用程序开发的路由工具

除此以外，vue-cli 已经使用 node 配置了一套本地服务器和安装命令等，本地运行和打包只须要一个命令就能够搞定，很是的方便。

为何写这个项目

以前的 vue-sell，是一个很是好的 vue 的项目教程了，学了 vue 之后，跟着作一遍 vue-sell，应该对 vue 的基本操做都能很是熟练的掌握了。 可是如何结合 vuex 和 vue-router，以及其余技术，作一个大型的项目，不少同窗仍是苦于没有经验和项目实例，因此就有了这个 vue-music。

vue-music 里面用到了 vue 全家桶，还有 better-scroll，jsonp 等其余工具，用的也是线上真实的音乐接口数据，并且项目里封装了不少完美的组件，对我的技术的学习和提高有很大的帮助，项目级别上也达到了中大型级别。 很是适合 vue 的进阶学习。

获取教程

这个项目我从头至尾写了一遍，解决了项目中遇到的全部问题，因为有一些包或者模块升级的缘由，会有一些小的问题，我都已经解决过了。

你能够加群联系到我，得到这个视频教程。群里面也有不少热爱技术的小伙伴，你们一块儿交流学习！！

写在最后

个人主页： neveryu.github.io/index.html

QQ群：685486827