栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

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

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

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

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

技术栈 (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    生产目录
    |—— apiapi列表和数据处理
    |——|—— 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呗,哈哈哈!!!

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/241294.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号