文章目录

vue-music
- 简介
- 实现的功能
- 截屏演示
- 移动端演示
- 项目代码
- 构建
- Tip
- 详细
- 为什么写这个项目
- 获取教程

vue-music

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

欢迎体验：https://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。

实现的功能

1、音乐列表、歌单、歌手、排行、榜单、推荐
2、音乐播放、暂停、上一曲、下一曲、喜欢
3、播放列表、添加到播放列表、历史列表
4、搜索单曲、歌手、专辑、MV
5、查看歌手页面、专辑页面、MV
6、热门搜索
7、搜索历史记录
8、排行榜
9、切换播放模式
10、歌词
11、个人中心
12、项目介绍

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

截屏演示

移动端演示

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

项目代码

https://github.com/Neveryu/vue-music

构建

# 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 的进阶学习。

获取教程

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

你可以加群联系到我，获得这个视频教程。群里面也有很多热爱技术的小伙伴，大家一起交流学习！！

---------------------------(正文完)------------------------------------
一个 Vue 的学习交流群，想进来面基的，可以点击这个logo，或者手动search群号：685486827

写在最后：约定优于配置-------软件开发的简约原则.
-------------------------------- (完)--------------------------------------

我的：
个人网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
新浪微博： https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博…

width="100%" height="500" class="share_self" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=550&fansRow=1&ptype=1&speed=0&skin=8&isTitle=1&noborder=1&isWeibo=1&isFans=0&uid=5346488237&verifier=d529ff3a&dpc=1">

用Vue做一个音乐app相关推荐

用vue做一个音乐播放器
xz-music 音乐播放器(web移动端) 开源协议MIT License github: https://github.com/huangweizhi/xz-music.git gitee: ht ...
响铃：版权合作后，手机真的迎来了只装一个音乐APP的时代？
文 | 曾响铃来源 | 科技向令说(xiangling0815) 最近,音乐APP产品领域发生了两件大事. 先是3月6日阿里音乐与网易云音乐宣布达成音乐版权互相转授权合作,阿里转授滚石.韩国SM.B ...
vue 做一个定点地图的页面（定位到你想要的地点）
实例:如何用vue做一个定点地图的页面,进入一个地图,并且定位到你想要的地点. 这里举一个定点医院的例子. 在pages中添加一个vue页面为Hospital_map.vue,将该网页注册到路由src ...
VUE做一个公共的提示组件，显示两秒自动隐藏，显示的值父组件传递给子组件
需求:VUE做一个公共的提示组件,显示两秒自动隐藏,显示的值由父组件动态传给子组件. 效果图: 实现步骤: 1.创建一个子组件 Toptips.vue (它就是公共提示组件), optips.vue代 ...
如何使用uni-app做一个音乐播放器
如何使用uni-app做一个音乐播放器 uni-app提供给我们非常棒的API,可以做出很好看的自定义样式的音乐播放器好的编译器可以让我们的项目事半功倍,HBuilderX可以很方便的创建uni-a ...
iOS动手做一个直播app开发(代码篇)
iOS动手做一个直播app开发(代码篇) ###开篇好久没写简书,因为好奇的我跑去学习直播了,今天就分享一下我的感慨. 目前为止直播还是比较热点的技术的,简书,git上有几篇阅读量和含金量都不错的文 ...
使用vue做一个“淘宝“项目——3
做出分类页面前言:做出首页,详细请看前两篇文章 1.使用vue做一个"淘宝"项目(做出首页) 2.使用vue做一个"淘宝"项目(显示商品栏) 目录: 创建项目 ...
Python3爬虫——用selenium获取歌曲id，做一个音乐下载器
我们之前已经学习了selenium的简单实用,现在就来实战下,我们通过selenium获取歌曲的id,然后通过网易云音乐的外链地址来下载音乐,做一个音乐下载器(此项目仅供教学使用),下面我们先来看一下 ...
23|VS2017 基于MFC 做一个音乐播放器，带音量调节，切换歌曲
最近接到个小任务,用MFC做一个音乐播放器,不过这也是一直想尝试的,于是今天早上9点到下午16:00,总算是完成了需要的功能开门见山,先展示一下整体界面下面按照功能模块介绍我做这个播放器的过程预 ...
JS和H5做一个音乐播放器，附带源码
http://mp.weixin.qq.com/s/KpXT9X46AMlUVXQvpHuXGQ 效果图: 实现的功能 1.首页 2.底部播放控件 3.播放页面 4.播放列表 5.排行榜 6.音乐搜索 ...

用Vue做一个音乐app