本人在自学vue，之后想在学习过程中加以实践。由于之前有做过jquery的播放器效果，ui仿照网易云，地址 www.daiwei.org/music

于是就想做vue 的网易云播放器，网上也有类似的项目。看了一下都挺不错的，于是就想自己做一个试试

对 JUST DO IT !!!   DO IT !!!

项目基于Vue 2.0  使用Vue-router，axios获取本地的data.json文件（所有的用户，音乐信息），以及vuex 的状态管理

本人也是一枚小白,边学习边做的,这个播放器有什么不足之处,希望各位可以提出意见建议,我们共同学习进步.

GitHub地址： https://github.com/IFmiss/vue-WangYiCloudMusic 欢迎Star!!!

这个项目会一直更新，还有很多模块需要去完成，下一步就是歌词，歌单详情的内容了

首页 及侧边栏信息

底部播放 和 浮层音乐列表信息

播放详情页 播放暂停效果

播放详情切歌效果

基于vue2.0的网易云音乐 (实时更新)的更多相关文章

  1. kallinux2.0安装网易云音乐

    安装 dpkg -i netease-cloud-music_1.0.0_amd64.kali2.0(yagami).deb apt-get -f install dpkg -i netease-cl ...

  2. 瓣呀，一个基于豆瓣api仿网易云音乐的开源项目

    整体采用material design 风格,本人是网易云音乐的粉丝,所以界面模仿了网页云音乐,另外,项目中尽量使用了5.0之后的新控件. 项目整体采用mvp+rxjava+retrofit 框架,使 ...

  3. Manjaro / ArchLinux 安装网易云音乐解决搜索不能输入中文方法

    0. 安装网易云音乐 yay -S netease-cloud-music 1.先安装qcef这个软件包. sudo yay -S qcef 2.编辑/opt/netease/netease-clou ...

  4. 基于vue2+vuex+vue-router+sass+webpack的网易云音乐

    [本博客为原创:http://www.cnblogs.com/HeavenBin/]  前言: 这段时间写的一个项目,供给大家互相学习,有什么疑问可以issues我. 源码地址:https://git ...

  5. 基于Taro与Typescript开发的网易云音乐小程序

    基于Taro与网易云音乐api开发,技术栈主要是:typescript+taro+taro-ui+redux,目前主要是着重小程序端的展示,主要也是借此项目强化下上述几个技术栈的使用,通过这个项目也可 ...

  6. 基于Taro与typescript开发的网易云音乐小程序（持续更新）

    基于Taro与网易云音乐api开发,技术栈主要是:typescript+taro+taro-ui+redux,目前主要是着重小程序端的展示,主要也是借此项目强化下上述几个技术栈的使用,通过这个项目也可 ...

  7. 关于linux下安装并打开网易云音乐——v 1.0.0

    首先,在网易云音乐官网的下载页面下载linux版本网易云音乐安装包(.deb文件) 下载好之后,在下载文件夹中双击打开文件,等待安装完毕 安装完成之后,直接双击图标是打不开的 需要用管理员命令打开 c ...

  8. 用vuejs仿网易云音乐（实现听歌以及搜索功能）

    前言 前端时间学了vue,一开始看了vue1.0,后来实在觉得技术总得实践,就直接上手vue2.0.然后花了将近一周时间做了一个网易云音乐的小项目.一开始觉得项目比较小,没必要用vuex所以就没有使用 ...

  9. 用VUEJS做一个网易云音乐

    前言:自己学习VUEJS也一段时间,但一直没有做出来一东西.我自己一直喜欢用网易云音乐app,于是乎就做了这个app. 项目截图 技术栈 vue全家桶 (vue vue-router vuex) ax ...

随机推荐

  1. VR全景智慧城市

    随着虚拟现实产业的发展,我国对虚拟现实产业也越来越重视了.我国虚拟现实VR市场增长速度很快,市场活跃性很高,很多人都看好我国的虚拟现实VR市场,而且未来国内虚拟现实VR市场的销量还将有更大的增长.据赛 ...

  2. servlet context 和 servlet config

    servletConfig Servlet容器初始化一个servlet对象时,会为这个servlet对象创建一个servletConfig对象,该对象中包含了servlet的<init-para ...

  3. jQuery使用记录

    jQuery方法获得的集合为类数组对象,可以用一些数组的方法.集合里面的元素为DOM元素,不是jQuery对象. jQuery设置css3属性的兼容性写法: $(element).css({ &quo ...

  4. .NET框架及C#语言基础

    1.Microsoft.NET框架结构是一个面向网络,支持各种用户终端的开发平台. 2..NET框架的主要内容有CLR,FCL,ADO．NET,XML,ASP.NET,WinForms和WebSeri ...

  5. [.NET跨平台]Jeuxs独立版本的便利与过程中的一些坑

    本文环境与前言 之前写过一篇相关的文章:在.NET Core之前,实现.Net跨平台之Mono+CentOS+Jexus初体验 当时的部署还是比较繁琐的,而且需要联网下载各种东西..有兴趣的可以看看, ...

  6. angularjs中使用轮播图指令swiper

    我们在angualrjs移动开发中遇到轮播图的功能 安装 swiper  npm install --save swiper   或者 bower install --save swiper 引入文件 ...

  7. jquery attr处理checkbox / select 等表单元素时的坑

    先上html结构 <body> <form action=""> <input type="checkbox" id=" ...

  8. STL语法——映射：map 反片语（Ananagrams，UVa 156）

    Description Most crossword puzzle fans are used to anagrams--groups of words with the same letters i ...

  9. .net core中引用webservice，并忽略https证书验证

    1.打开vs, 工具-->扩展和更新 下载这个 2. 在admin下右键,添加-->connected service 选择wsdl文件路径,或者服务的url,比如https://**** ...

  10. Docker化tomcat 并且使用maven热部署

    今天没事干 就把自己的tomcat  docker化并且使用maven实现热部署 特别记录一下~ 1.首先进行centos7的安装 就不在记录了 注意的是最好使用centos7 因为docker 依赖 ...