基于Vue(2.9) + vuex + vue-router + scss + axios + webpack仿网易云音乐app前端界面
后端使用网易云音乐NodeJS版API
vue
:用于构建用户界面的MVVM框架vuex
:Vue集中状态管理,用于多组件之间共享状态vue-router
:为单页面应用提供的路由系统scss
:CSS预处理器axios
:用于发送ajax请求vue-cli
:脚手架工具,用于快速初始化项目webpack
:模块打包工具iconfont
:阿里巴巴矢量图标库字体图标ElementUI
的部分组件better-scroll
:一款移动端滚动插件
- 登录(使用自己的网易云账号密码登录即可)
- 播放、暂停音乐,查看、拖拽歌词,跳转进度,前后切换音乐,播放列表中切换音乐
- 搜索,搜索结果分类
- 发现页:轮播图,每日推荐,排行榜,热门歌单推荐,歌单广场,音乐日历
- 我的页:个人信息,喜欢的音乐,创建的歌单,收藏的歌单
- 云村页:云村热评墙,查看关注的人列表
还有不少功能没写,努力完善ing...
PC端按F12切换到移动设备模式查看即可
- 优化图片加载速度,图片懒加载
- 添加下拉搜索更多功能,完善搜索页面
- 添加MV、电台、设置等功能
- to be continued...
后台代码运行详见网易云音乐NodeJS版API
#切换到项目目录
cd netease-cloud-music
# 安装依赖
npm install
# 本地运行
npm run dev
# 生产打包
npm run build