学习了几周的vuejs,学习的过程中做了一个音乐播放器WebApp (顺便听听音乐~) ,过程中也有借鉴过别人做的,感觉受益匪浅

链接

项目在线地址 : 音乐播放器

github : https://github.com/houbx/webApp

技术栈

  • vue2.0
  • vue-router 2.x
  • vuex 2.x

实现

  • 数据来源用的是QQ音乐的官方接口
  • 四个主页面 推荐 排行 歌单 我的 (其实是3个 我的页面什么都没有)
  • 排行榜
  • 轮播图
  • 音乐播放 开始 暂停 上一首 下一首
  • 搜索歌曲和歌手
  • 播放列表
  • 歌词 (暂时不存在,本来是有的 ,后来由于位置不好看暂时移除)

项目截图

一点总结

  • 总体来说 我做的这个和别人的比起来还是有差距的 还要继续学习 持续改进 , 如果看着还行的话给个star吧 !

Vue2.0音乐播放器的更多相关文章

  1. Android音乐播放器源码(歌词.均衡器.收藏.qq5.0菜单.通知)

    一款Android音乐播放器源码,基本功能都实现了 qq5.0菜单(歌词.均衡器.收藏.qq5.0菜单.通知) 只有向右滑动出现,菜单键和指定按钮都还没有添加. 源码下载:http://code.66 ...

  2. [转载]历上最强的音乐播放器（jetAudio-8.0.5.320-Plus-VX

    原文地址:历上最强的音乐播放器(jetAudio-8.0.5.320-Plus-VX-完全汉化版)下载作者:盖世天星 历上最强的音乐播放器(jetAudio-8.0.5.320-Plus-VX-完全汉 ...

  3. 迷你音乐播放器v1.0正式上线!

    迷你音乐播放器V1.0正式上线! 版本介绍: 1.随机播放切换开关(通过点击专辑图片) 2.通过拖动歌曲名及艺术家名调整歌曲播放进度 3.手机浏览访问支持熄屏播放 4.暂不支持在线搜索功能 快来一起分 ...

  4. swift3.0 简单直播和简单网络音乐播放器

    本项目采用swift3.0所写,适配iOS9.0+,所有界面均采用代码布局. 第一个tab写的是简单直播,传统MVC模式,第二个tab写的是简单网络音乐播放器.传说MVVM模式(至于血统是否纯正我就不 ...

  5. 卡拉OK效果的实现-iOS音乐播放器

    自己编写的音乐播放器偶然用到这个模块,发现没有思路,而且上网搜了搜,关于这方面的文章不是很多,没找到满意的结果,然后自己也是想了想,最终实现了这种效果,想通了发现其实很简单. 直接上原理: 第一种: ...

  6. 小菜学习Winform（二）WMPLib实现音乐播放器

    前言 现在网上有很多的音乐播放器,但好像都不是.net平台做的,在.net中实现音乐文件的播放功能很简单,下面就简单实现下. SoundPlayer类 在.net提供了音乐文件的类:SoundPlay ...

  7. 【大结局】《从案例中学习JavaScript》之酷炫音乐播放器（四）

    这是之前写的用H5制作的音乐播放器,前三节其实已经做得差不多了,音轨的制作原理已经在上一节说明,不过一直还没有和音乐对接. 本章作为该系列的一个完结篇,我会专门把动态音轨的实现代码贴出来,demo地址 ...

  8. Andriod小项目——在线音乐播放器

    转载自: http://blog.csdn.net/sunkes/article/details/51189189 Andriod小项目——在线音乐播放器 Android在线音乐播放器 从大一开始就已 ...

  9. Android开发6：Service的使用（简单音乐播放器的实现）

    前言 啦啦啦~各位好久不见啦~博主最近比较忙,而且最近一次实验也是刚刚结束~ 好了不废话了,直接进入我们这次的内容~ 在这篇博文里我们将学习Service(服务)的相关知识,学会使用 Service ...

随机推荐

  1. VIM 第二天--快捷键

    好吧,今天是重新学习vim的第二天,不得不说,收货丰厚. 先来勉励一下自己: 存活(目前状态) 感觉很好 感觉更好,更强,更快 吃用vim超能力 vimtutor练到lesson 7了,略微总结一下, ...

  2. 关于老版本ubuntu源不能用的问题

    在解决方向键为大写ABCD时安装vim 我的是Ubuntu 10.10 老版本 输入 sudo apt-get install vim 时出现 Package 'vim' has no install ...

  3. HDU-1232-畅通工程（并查集）

    题目链接http://acm.hdu.edu.cn/showproblem.php?pid=1232考察并查集,(最小生成树)题目很简单用k记录树根的个数,k-1就是还需要建设的路 #include& ...

  4. Camera.ScreenPointToRay 解析

    Unity官方文档: Camera.ScreenPointToRay public function ScreenPointToRay(position: Vector3): Ray; Descrip ...

  5. Raphael的text及对齐方式

    Raphael的text及对齐方式 <%@ page language="java" contentType="text/html; charset=UTF-8&q ...

  6. pureMVC简单示例及其原理讲解四(Controller层)

    本节将讲述pureMVC示例中的Controller层. Controller层有以下文件组成: AddUserCommand.as DeleteUserCommand.as ModelPrepCom ...

  7. sublime text 添加到鼠标右键功能

    安装sublime text的同学可能在安装的时候忘了设置sublime text的右键功能.那我们介绍如何添加. 我们要创建一个.reg为后缀的文件sublime_addright.reg.那么…… ...

  8. TypeScript教程2

    在TS中,我们允许开发人员使用面向对象技术. 1.类让我们看看一个简单的基于类的例子: class Greeter { greeting: string; constructor(message: s ...

  9. MySQL5.7免安装教程

    注如果连文件位置都和我这个一样的话,基本上所有命令都可以直接复制这上面就行,前提是你愿意放到C盘的并在Program files下面新建一个文件夹mysql存放这些东西 建议大家还是自己动手配置一下这 ...

  10. atom编辑器快捷键

    挑来挑去,还是决定选择atom,做为我的编程编辑器. 下面是我总结的atom快捷键 //1.atomcmd+,; 设置cmd+h; 隐藏程序cmd+alt+h; 隐藏其他程序 //2.文件cmd+n; ...