vue3.0网易云音乐及入门小案例

前言

之前学习vue3.0时做了几个小案例,近段时间又找了几个案例想着把之前做的那些和现在做的放在一起于是休息的时候就搭建了一个vue3的项目。这个项目所用的数据都是页面上写死的,音乐播放器数据是调用的网易云api拿到的。

目标功能

[✔] 手机、邮箱登录
[✔] 修改密码
[✔] 我的歌单信息
[✔] 最近播放
[✔] 搜索功能
[✔] 搜索结果展示
[✔] 发现页面歌单
[✔] 发现页面排行榜
[✔] 喜欢音乐(获取用户喜欢的音乐)
[✖] 歌曲喜欢与否
[✔] 歌词
[✔] 相关评论
[✖] 评论点赞 (目前只获取评论点赞数量,没有做点赞功能)
[✔] 歌曲mv播放
[✔] 签到
[✔] 注册
[✔] 歌手分类

登录页面,本来想做个滑块验证,但是之前vue2用到的vue-monoplasty-slide-verify插件好像不支持vue3,所以这一块就还没做。登录调用的是网易云登录接口,目前只做了手机号、邮箱登陆,二维码登录接口一直不返回数据暂时先不做
影视大厅功能还没有做,豆瓣的API现在已经不能用了,等找到其他API再做这部分。

部分截图

1.登陆页面


image.png

2.首页


image.png

3.修改密码
image.png

4.推荐页


image.png

5.历史歌单
image.png

6.歌曲mv播放
image.png

启动步骤
查看源码点击 查看源码 欢迎star,欢迎issue
npm install
npm run dev (本地开发)

后期我会在博客更新项目开发过程中遇到的坑,学习到的新知识,新方法等。欢迎关注

本项目会长期更新,欢迎大家指出问题,共同学习
希望对读完本文的你有帮助、有启发,如果有不足之处,欢迎批评指正交流!

辛苦整理良久,还望手动点赞鼓励~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容