基于Vue(2.9) + vuex + vue-router + scss + axios + webpack仿网易云音乐app前端界面

netease-cloud-music

基于Vue(2.9) + vuex + vue-router + scss + axios + webpack仿网易云音乐app前端界面
后端使用网易云音乐NodeJS版API

Github

网易云音乐app前端界面

技术栈

  • vue:用于构建用户界面的MVVM框架
  • vuex:Vue集中状态管理,用于多组件之间共享状态
  • vue-router:为单页面应用提供的路由系统
  • scss:CSS预处理器
  • axios:用于发送ajax请求
  • vue-cli:脚手架工具,用于快速初始化项目
  • webpack:模块打包工具
  • iconfont:阿里巴巴矢量图标库字体图标
  • ElementUI的部分组件
  • better-scroll:一款移动端滚动插件

功能

  • 登录(使用自己的网易云账号密码登录即可)
  • 播放、暂停音乐,查看、拖拽歌词,跳转进度,前后切换音乐,播放列表中切换音乐
  • 搜索,搜索结果分类
  • 发现页:轮播图,每日推荐,排行榜,热门歌单推荐,歌单广场,音乐日历
  • 我的页:个人信息,喜欢的音乐,创建的歌单,收藏的歌单
  • 云村页:云村热评墙,查看关注的人列表

还有不少功能没写,努力完善ing…

项目演示

项目演示地址

PC端按F12切换到移动设备模式查看即可

界面展示

基于Vue(2.9) + vuex + vue-router + scss + axios + webpack仿网易云音乐app前端界面_第1张图片
基于Vue(2.9) + vuex + vue-router + scss + axios + webpack仿网易云音乐app前端界面_第2张图片
基于Vue(2.9) + vuex + vue-router + scss + axios + webpack仿网易云音乐app前端界面_第3张图片
基于Vue(2.9) + vuex + vue-router + scss + axios + webpack仿网易云音乐app前端界面_第4张图片
基于Vue(2.9) + vuex + vue-router + scss + axios + webpack仿网易云音乐app前端界面_第5张图片
基于Vue(2.9) + vuex + vue-router + scss + axios + webpack仿网易云音乐app前端界面_第6张图片
基于Vue(2.9) + vuex + vue-router + scss + axios + webpack仿网易云音乐app前端界面_第7张图片
基于Vue(2.9) + vuex + vue-router + scss + axios + webpack仿网易云音乐app前端界面_第8张图片
基于Vue(2.9) + vuex + vue-router + scss + axios + webpack仿网易云音乐app前端界面_第9张图片
基于Vue(2.9) + vuex + vue-router + scss + axios + webpack仿网易云音乐app前端界面_第10张图片

TODO

  • 优化图片加载速度,图片懒加载
  • 添加下拉搜索更多功能,完善搜索页面
  • 添加MV、电台、设置等功能
  • to be continued…

运行

后台代码运行详见网易云音乐NodeJS版API

#切换到项目目录
cd netease-cloud-music

# 安装依赖
npm install

# 本地运行
npm run dev

# 生产打包
npm run build

转载请注明出处,谢谢!

你可能感兴趣的:(前端,vuejs,vue)