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

zombieda 发布于2019-08-21 15:55 / 1203人阅读

摘要：仿网易云音乐项目地址来源感谢让我能用喜欢的东西做一个属于自己的播放器源码地址不要脸的求哈哈哈项目预览端按切换手机调试模式效果更佳移动端可直接扫码技术栈文件结构构建服务和配置项目不同环境的配置项目目录项目入口文件项目配置文件静态资源生产目录

仿网易云音乐(webapp) 项目地址 (project address)

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

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

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

(移动端可直接扫码)

技术栈 (technology)

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

文件结构 (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...

2.安装依赖环境 : npm install

3.启动项目 : npm run dev

4.打包项目 : npm run build

总结(summary)

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

专线服务私有云 python都能做什么 php都能做什么 docker都能做什么 linux都能做什么

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

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

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

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

sf_wangchong 2019-08-20 16:19 评论0 收藏0
Vue全家桶高仿网易云音乐mac客户端版（不像赔十个！！）

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

mgckid 2019-08-26 10:23 评论0 收藏0
2017-06-22 前端日报

摘要：前端日报精选新的长度单位你知道么高阶函数一点通的故事隔行扫描算法专题之数组去重全家桶每个人都能做的网易云音乐腾讯前端团队社区中文前端推荐第天听说你缺少一个顺手的图床知乎专栏译怎样创建定制表单组件碎语掘金函数式编程到底是个啥 2017-06-22 前端日报精选 CSS 新的长度单位 fr 你知道么？高阶函数一点通png的故事：隔行扫描算法JavaScript专题之数组去重 · Issu...

songze 2019-08-20 17:26 评论0 收藏0
用vue全家桶写一个“以假乱真”的网易云音乐

摘要：关于路由，刚开始设计路由的时候想了很多，由于一开始的目标就是网易云音乐的所有内容，所以设计了三级路由，，大概这样，点击查看。标题略夸张了，但是这个从ui还原上已经很接近官方版本了。虽然目前这个是很多人造过的轮子，但是可能每个人的实现方式都不一样，自己写一遍也会有许多收获。项目地址预览地址 api：ap使用的是一个开源的nodejs封装的网易云音乐api，地址技术栈 vue...

clasnake 2019-08-20 18:19 评论0 收藏0
Vue.js全家桶低仿网易云音乐(MacOS版) 已新增electron打包pc平台app

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

leap_frog 2019-08-29 12:42 评论0 收藏0