资讯专栏INFORMATION COLUMN

Vue.js全家桶高还原网易云音乐(Windows PC版)

sf_wangchong / 2505人阅读

摘要:项目地址由于网易云的限制,部分功能可能会失效,如有需要可以项目下来在本地运行,如果炸了,麻烦在评论中告知一下我因为做的是端所以请在电脑端访问源码地址项目预览评论和歌单详情都封了我的暂时无法使用这两个功能了项目描述前端部分实现了滑块弹出层歌词

项目地址

由于网易云的api限制,部分功能可能会失效,如有需要可以clone项目下来在本地运行,如果api炸了,麻烦在评论中告知一下我

因为做的是PC端 所以请在电脑端访问

源码地址

项目预览(评论和歌单详情api都封了我的ip暂时无法使用这两个功能了)

项目描述

前端部分

实现了滑块、弹出层、歌词、分页、轮播等组件 所有组件皆独立完成

使用了Vue.js做单页应用

使用了Vue Router处理路由

使用了Vuex管理组件间的状态,实现非父子组件之间的通信

初始化数据通过localstorage存储

后端部分

开发环境下使用了express处理路由

通过CORS解决跨域问题

完成情况

实现了

(登录功能一开始想做的,但一想大家也不放心把网易云账号密码用来登录,所以还是没做了)

网易云音乐首页(轮播、推荐歌单、每日推荐、热门歌单、排行榜、热门歌手、最新音乐)

切换主题(因为PC端切换主题要改的样式太繁琐,所以只做了黑色和红色的主题)

搜索(歌曲搜索、歌手搜索、歌单搜索、专辑搜索)

播放页面(歌词显示、所有评论显示(分页展示))

歌单、专辑、歌手信息等展示页

当然还有最重要的播放功能(音量调节、快进快退、切歌、当前歌单)

图就放一部分了,更多内容欢迎戳 http://oyhfe.com/VueMusic

最后!重点!敲黑板!

距离上次交作业已经过了二十多天了,一开始也没想到这个项目会花掉我这么久时间,一路踩了很多坑,内容实现也有些繁琐,但是收获还是很多的,增加了Vue全家桶熟练度。

欢迎大家提issue,pr

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82861.html

相关文章

  • Vue全家桶高仿网易音乐mac客户端(不像赔十个!!)

    摘要:库用了魔改样式的歌词滚动部分用了黄轶老大的贼爽主题换肤用的变量替换。语言的下一代标准预处理器安装与使用前端项目后端项目 音乐播放器虽然烂大街了,但是作为前端没自己撸一个一直是个遗憾,而且偶然间发现pc端web版的网易云音乐做的实在是太简陋了,社区仿pc客户端的网易云也不多见,为了弥补这个遗憾,就用vue全家桶模仿mac客户端的ui实现了一个,欢迎提出意见和star~ 预览地址 源码地址...

    mgckid 评论0 收藏0
  • Vue.js全家桶低仿网易音乐(MacOS) 已新增electron打包pc平台app

    摘要:项目地址暂时只实现了基本功能加了一点微小的效果主要适配浏览器对和做了一点微小的适配现在已经包括了打包平台的功能了源码地址项目预览项目描述前端部分整体加载进度懒加载模块的加载中提示实现了滑块增量分页新曲等使用了做单页应用使用了处理路由使用了管 项目地址 暂时只实现了基本功能 加了一点微?小的效果 主要适配pc浏览器 对android 和ios 做了一点微?小的适配 现在已经包括了ele...

    leap_frog 评论0 收藏0
  • Vue.js全家桶低仿网易音乐(MacOS) 已新增electron打包pc平台app

    摘要:项目地址暂时只实现了基本功能加了一点微小的效果主要适配浏览器对和做了一点微小的适配现在已经包括了打包平台的功能了源码地址项目预览项目描述前端部分整体加载进度懒加载模块的加载中提示实现了滑块增量分页新曲等使用了做单页应用使用了处理路由使用了管 项目地址 暂时只实现了基本功能 加了一点微?小的效果 主要适配pc浏览器 对android 和ios 做了一点微?小的适配 现在已经包括了ele...

    graf 评论0 收藏0
  • Vue.js全家桶低仿网易音乐(MacOS) 已新增electron打包pc平台app

    摘要:项目地址暂时只实现了基本功能加了一点微小的效果主要适配浏览器对和做了一点微小的适配现在已经包括了打包平台的功能了源码地址项目预览项目描述前端部分整体加载进度懒加载模块的加载中提示实现了滑块增量分页新曲等使用了做单页应用使用了处理路由使用了管 项目地址 暂时只实现了基本功能 加了一点微?小的效果 主要适配pc浏览器 对android 和ios 做了一点微?小的适配 现在已经包括了ele...

    melody_lql 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<