作者:Lambda_
链接:https://juejin.im/post/5d96dd9d51882509563a096e
![3d5da7027d7ec74d27460600d67c3aa2.png](https://i-blog.csdnimg.cn/blog_migrate/ffe2a8510d05bcf9003c718609b285de.jpeg)
ElementUI一般是PC端采用,如果是vant等移动端UI库就好了~~~~
技术栈
主要依赖
- Vue 全家桶(使用 Vue-cli 作为构建工具)
- WebPack4.0
- ES6
- Less
- ESLint
- ElementUI
目标功能
- 手机登录、注册
- 修改密码
- 我的页面歌单信息
- 添加,删除歌单
- 最近播放
- 心动模式
- 我的电台
- 我的收藏
- 发现页面推荐歌单
- 发现页面新碟
- 发现页面新歌
- 发现页面每日推荐
- 发现页面歌单
- 歌单广场
- 新歌推荐
- 更多新碟--新增
- 发现页面排行榜
- 发现页面电台
- 发现页面私人FM
- 搜索功能
- 搜索结果展示
- 热搜榜
- 历史记录
- 搜索推荐
- 歌手分类
- 播放功能(小播放器进度条)
- 播放列表
- 添加删除播放列表
- 歌曲mv播放
- 签到
- 歌曲喜欢与否
- 专辑收藏与否
- 相关评论
- 用户相关
- 用户设置
- 页面滚动加载
- 左右滑动切换
- 全面优化&修复
部分截图
侧边账户中心
![b39688ed1643175ade31105c9de9c946.png](https://i-blog.csdnimg.cn/blog_migrate/8d408ac5b2b7c59611935791b9cf0e1d.jpeg)
发现页面&每日推荐
![b489754d4022b55b9c2aac3576f1dead.gif](https://i-blog.csdnimg.cn/blog_migrate/a3067fc6aba74e7cae1a6867469b8d04.gif)
歌单&歌单详情
![e4baab1371b910e08201ac82349a97aa.gif](https://i-blog.csdnimg.cn/blog_migrate/1e8e7ed6c6380c8f719e31936ca831a2.gif)
排行榜&排行榜信息
![6f55380e62365688b8598fd7634a9bb0.gif](https://i-blog.csdnimg.cn/blog_migrate/e8ab7fa7ed598c689637d7a476ceab48.gif)
我的页面&最近播放
![aa31c572bc54481f31c50ab8d6f2c019.gif](https://i-blog.csdnimg.cn/blog_migrate/c8e1e8f1c86707f009917376dce32dac.gif)
搜索展示
![a970cf741a77087cf469dedeb9f7d8bd.gif](https://i-blog.csdnimg.cn/blog_migrate/8a4dffa610efb54d626deefe69335599.gif)
启动步骤
- npm install
- npm run dev (本地开发)
- npm run build (生产环境打包)