[vue全家桶]每个人都能做的网易云音乐

本文作者:IMWeb 小前端 原文出处:IMWeb社区 未经同意,禁止转载

仿网易云音乐(webapp)

项目地址 (project address)

api来源 感谢binaryify让我能用喜欢的东西做一个属于自己的播放器!

源码地址 不要脸的求star 哈哈哈!!!

项目预览 1mhere.cn (pc端按F12切换手机调试模式效果更佳!)

(移动端可直接扫码)

技术栈 (technology)

vue2.0 + vuex + vue-router2.0 + es6 + axios + vux

文件结构 (File structure)

├── build                       构建服务和webpack配置
├── config                      项目不同环境的配置
├── dist                        项目build目录
├── index.html                  项目入口文件
├── package.json                项目配置文件
├── static                       静态资源
├── src                         生产目录
    |—— api                     api列表和数据处理
    |——|—— apiList.js           api列表
    |——|—— getData.js           数据处理(封装一个axios请求)    
    |—— assets                  静态资源(img,less)
    |——|—— img                  静态图片
    |——|—— style                样式文件  
    |—— components              公用组件
    |——|—— bottomSongList       播放器播放列表组件  
    |——|—— headerNav            头部导航组件
    |——|—— music                音乐组件
    |—— page                    页面组件
    |——|—— albumsListDetails    专辑内容组件 
    |——|—— recommend            个性推荐组件
    |——|—— searchList           搜索列表组件
    |——|—— singer               歌手组件
    |——|—— songDetails          歌曲详情组件
    |——|——|—— player            播放器组件
    |——|—— songList             歌单组件
    |——|—— songListDetails      歌单详情组件
    |——|—— topList              排行榜组件
    |—— router                  路由组件
    |—— store                   数据状态管理组件
    |—— util                    公用方法

项目功能 (Project Function)

完成功能(finish function)

  • 个性推荐,歌单,排行榜页面
  • 滑动功能(左右滑动切换菜单)
  • 播放功能(快进,快退,上一曲,下一曲,歌词同步等)
  • 搜索功能(热门搜索,单曲,歌手,专辑,歌单,用户)
  • 歌单功能(最新,最热,精品歌单及详情展示)
  • 歌手专辑功能(介绍及详情展示)
  • 排行榜功能(云音乐官方版)

效果图 (effect picture)

项目运行(Probject running)

1.克隆项目到本地 : git clone https://github.com/webfansplz/xcMusic.git

2.安装依赖环境 : npm install

3.启动项目 : npm run dev

4.打包项目 : npm run build

总结(summary)

本项目始于本人兴趣,还有许多不足大家轻喷,欢迎大家一起交流讨论学习,喜欢的点个star呗,哈哈哈!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云社区全球资讯抢先看

GitHub上11月份最热门的Java项目

链接:www.itcodemonkey.com/article/1424.html 2017年11月GitHub上最热门的Java项目新鲜出炉~ 一起来看看这些...

25600
来自专栏编程

盘点·GitHub最著名的20个Python机器学习项目

摘要 摘要:开源是技术创新和快速发展的核心。这篇文章向你展示Python机器学习开源项目以及在分析过程中发现的非常有趣的见解和趋势。 我们分析了GitHub上的...

30300
来自专栏HaHack的专栏

dingdang-robot:一个开源的中文智能音箱项目

本文介绍我在业余时间开发的一个开源的智能音箱项目 dingdang-robot ,分享一下我在开发这个项目过程中的心得。

5.5K50
来自专栏PingCAP的专栏

实录 | 黄东旭:开源与基础软件创业在中国

10 月 23 日,EGO 北京分会会员、PingCAP 联合创始人兼 CTO 黄东旭作为 EGO 线上分享第二季嘉宾,与超过 400 位 EGO 会员交流了自...

20100
来自专栏51CTO技术栈的专栏

放弃 Dubbo,选择最流行的 Spring Cloud 微服务架构实践与经验总结

在使用 Spring Cloud 之前,我们对微服务实践是没有太多的体会和经验的。从最初的开源软件云收藏来熟悉 Spring Boot,到项目中的慢慢使用,再到...

5K10
来自专栏西安-晁州

github无法访问?试试修改hosts

github国内无法访问时,可以试试如下修改hosts,亲测有效: 204.232.175.78 http://documentcloud.github.com...

26900
来自专栏编程

GitHub上11 月份最热门的开源项目

链接:www.itcodemonkey.com/article/1468.html 转载请注明来源作者 2017 年 11 月份 GitHub 上最热门的开源项...

23000
来自专栏腾讯开源的专栏

开源项目无人问津?不妨拆读腾讯开源大神的“锦囊妙计”!

WeFlow是WeChat团队为web开发人员提供跨平台支持和环境准备的前端工作流开发工具,目前已支持微信游戏、微信·朋友圈广告、微信·城市服务等第三方合作团队...

67210
来自专栏腾讯开源的专栏

关于开源的几个真相!你还可能不如一枚小白精通开源

Star 多的项目就一定规范与优雅?文档是应放在 wiki 中还是 code repo 中?readme 越简洁越好,还是越详尽越好?readme 写中文还是英...

38710
来自专栏西安-晁州

oAuth2.0及jwt介绍

oAuth2.0流程示意如下: ? 关于jwt介绍: ? 说明: 关于jwt简单说明一下,jwt即为json web token,是用来和服务端建立加密通信所使...

21300

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励