【web-music】vue3 网易云音乐

已于 2022-08-30 19:37:29 修改
阅读量487 收藏
点赞数
分类专栏： 网易云音乐 vue web music 文章标签： 前端 javascript elementui
于 2022-08-28 21:35:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39211165/article/details/126574682
版权
vue 同时被 3 个专栏收录
22 篇文章 6 订阅
订阅专栏
web music
7 篇文章 0 订阅
订阅专栏
网易云音乐
3 篇文章 0 订阅
订阅专栏

Music

在这里插入图片描述

一个网易云音乐 与 YouTube Music 的在线音乐网页

旨在学习 vue3+vite+pinia+ts+element-plus，欢迎大家一起交流网易云音乐及技术。

在线演示
源码地址

页面

登陆

  • 账号密码登陆
  • 扫码登陆
  • 短信验证码登陆
  • 记录登陆状态
  • 其他登陆（邮箱、微博）

首页

  • 为你推荐（单曲）
  • 为您推荐（歌单）
  • 为您推荐（歌手）
  • 动态内容

探索

  • 新专辑和单曲
  • 分类
  • 排行榜
  • 新音乐视频（视频）

媒体库

  • 我喜欢的音乐
  • 近期播放
  • 我的歌单
  • 我的专辑
  • 收藏的歌手

播放页

  • 播放列表
  • 歌词
  • 相关推荐

组件

  • 音乐进度条
  • 推荐组件（单曲）
  • 推荐组件（歌单）
  • 歌手详情组件
  • 歌单详情组件
  • 歌词
  • 搜索框
  • 虚拟列表

兼容

  • 适配移动端

效果

在线演示
源码地址

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

参考

_pengliang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue3.0-web-music 音乐项目
06-06
Vue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3.0-web-musicVue3
vue3仿网易云移动应用
qq_46562878的博客
06-28 1707
vue3 vant 仿网易云web移动端
vue3.0网易云音乐及入门小案例
qihaotang的博客
04-26 1311
前言 之前学习vue3.0时做了几个小案例，近段时间又找了几个案例想着把之前做的那些和现在做的放在一起于是休息的时候就搭建了一个vue3的项目。这个项目所用的数据都是页面上写死的，音乐播放器数据是调用的网易云api拿到的。 目标功能 [√] 手机、邮箱登录 [√] 修改密码 [√] 我的歌单信息 [√] 最近播放 [√] 搜索功能 [√] 搜索结果展示 [√] 发现页面歌单 [√] 发现页面排行榜 [√] 喜欢音乐（获取用户喜欢的音乐） [x] 歌曲喜欢与否 [√] 歌词 [√] 相关评论 [x] 评论点赞
Vue3+node.js网易云音乐实战项目(七)
柒柒柒柒
06-30 4984
Vue3+node.js网易云音乐实战项目(七)
Vue3+Vite+TS独立开发仿网易云音乐Web应用
laplacepoisson的博客
07-20 2064
自己之前的项目要么就是比较小的，要么就是跟着视频敲的，感觉做完之后并没有很好地吸收学到的知识。于是想要自己独立地做一个前端项目，刚好看到网易云音乐的网页端没有它的客户端好看，于是就仿照网易云音乐的客户端做了一个Web端的应用。这个项目还有很多页面和功能没有实现，但一些基础功能都已经实现了。整个项目从技术选型，路由设计，再到代码规范，代码开发，自动构建部署的一系列流程都是自己独立完成的，期间不断踩坑，但也学习到不少的东西。...
vue-wangyiyun-music：【Vue + Vuex + Vux】网易云音乐web移动端
02-06
基于vue的网易云音乐移动端web appReact版本： :项目技术都比较简单，适合新手拿来练手的入门级Vue开发实战项目;主要功能有：推荐歌单，搜索歌曲，歌词滚动等；在线预览效果PC端请使用Chrome手机模式;如果喜欢可以右...
vue-music-app:【Vue + Vuex + Vux】 网易云音乐web移动端
04-30
基于 vue 的网易云音乐移动端 web app React 版本： 项目技术都比较简单，适合新手拿来练手的入门级 Vue 开发实战项目; 主要功能有：推荐歌单、搜索歌曲、歌词滚动等; 预览效果 PC 端请使用 Chrome 手机模式; 如果...
neteasemusic：Vue版仿网易云音乐ios端web spa
02-06
Vue全家桶高仿网易云音乐功能最多，按照ios客户端高仿，还有小程序版嘞网易忠粉，去年小程序刚出来时候开始用小程序写过一版高仿ios版网易云音乐。一直在踩坑，基本完成后开始考虑用vue实现（其实是懒，想脱坑）。...
NeteaseCloudMusic-Vue:vue开发的高仿网易云音乐web前端项目
05-22
一个个人仅供学习使用开发的高仿网易云音乐的完整项目~! 仅供个人学习~! 请务必将文档看完, 很多问题都可以在文档中找到解决, 也可以加入群一起交流, 群号: 970804317 下面也会有二维码 图片预览在楼下 最新版本更新...
netease-music-web：网易云网页端
02-14
网易音乐网 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
vue3-music:这是vue3音乐
04-03
Vue 3 +打字稿+ Vite 该模板将帮助您开始在Vite中使用Vue 3和Typescript进行开发。 推荐的IDE设置 + 。 确保在设置中启用vetur.experimental.templateInterpolationService ！ 如果使用[removed] 是当前处于RFC阶段的功能。 要获得语法的正确IDE支持，请使用而不是Vetur（并禁用Vetur）。 TS中.vue导入的类型支持 由于TypeScript无法处理.vue导入的类型信息，因此默认情况下将它们.vue为通用Vue组件类型。 在大多数情况下，如果您真的不在乎模板之外的组件prop类型，那么这很好。 但是，如果您希望在.vue导入中获取实际的道具类型（例如，在使用手动h(...)调用时获取道具验证），则可以使用以下代码： 如果使用手掌 运行Volar: Switch TS Plug
Vue3.0 + typescript 高仿网易云音乐 WebApp
weixin_39822244的博客
01-31 1031
Vue3.0 + typescript 高仿网易云音乐 WebApp 前言 Vue3.0 的正式发布，让我心动不已，于是尝试用 vue3 实现一个完整的项目，整个项目全部使用了 composition api, 相比较 options 方式，逻辑更加清晰，使用也更加灵活。 先贴上地址，喜欢的可以 star 一波 源码地址 : https://github.com/bianyingchun/vue3-music 这里还有 react hooks 版本 项目介绍 本项目是使用 vue-cli 4.5 搭建的项目
Vue3+Typescript+Vite实现网易云音乐年活动主导色
毕业作品网站
06-23 2530
《你的性格主导色》是今年网易云音乐前端团队开发的一款测试用户主导色的 H5 应用，上线后反响很好，刷爆了微博和朋友圈。项目的主要开发者 发表了一篇文章《官方揭秘！你的颜色是这样算出来的》，解释了一些动效和最后主导色的计算方面的问题。但由于涉及到了具体的业务，所以作者没有开源出源码，但是热心的作者给了很多的提示。我就是根据这些提示，揭秘了我比较感兴趣的部分。由于一直没有在生产环境中使用和，所以源码部分我使用了 +实现。由于活动页面使用了大量的视频和动效等，所以想在用户阅读选择题目的过程......
【vue3仿网易云音乐app】歌单列表以及歌单界面
EVELESLIE的博客
03-06 882
在musicList.vue中调用，将异步获取到的结果存在响应式对象state.musicList中。由于从后台获取到的是完整数字，展示出来太长了，所以转换成万、亿单位会有更好的视觉效果。在setup同步方法中，定义一个changeValue函数，使用整除的思想转换单位。点击歌单跳转到单独的详情页涉及到了路由跳转，因此使用router-link。在api/index.js中定义获取歌单方法。往to中传入baseurl和特定的id信息。在template中调用该方法。
Vue3+node.js网易云音乐实战项目(三)
柒柒柒柒
06-19 4008
Vue3网易云App实战项目
Vue3+node.js网易云音乐实战项目(一)
柒柒柒柒
06-19 3831
Vue3实战项目
Vue3+node.js网易云音乐实战项目(六)
柒柒柒柒
06-27 1813
Vue3+node.js网易云音乐实战项目(六)
vue3 web在线音乐项目——蔚蓝音乐 开发记录
最新发布
weixin_52878347的博客
08-16 1145
想基于vue3技术独立开发一个前端项目，以前做过一个基于vue2和uniapp仿网易云音乐的微信小程序，于是想再做个web版的。前端菜鸡一枚，仅个人记录，项目存在一些布局问题和逻辑bug。只做了我觉得比较核心有趣的几个页面和功能，还有挺多东西可以完善的，等有时间可以慢慢把功能补齐。进度条和歌词滚动还有鼠标拖拽进度条和歌词进度没有实现，歌词滚动还存在一点问题，如果是歌放到一半再打开歌词界面，会从歌词第一句快速滚动到目标位置，不会直接就是正在唱的那句。
【017】基于vue.js的网易云web端(实现播放、登录)（Node接口实现）
lllbn的博客
09-30 4060
技术：使用Vue+vue-cli+vue-router+node.js+element-UI+网易云接口。*本项目是基于Vue.js的仿网易云的web端网页，开发过程路主要使用到了Vue、html、css、JavaScript、Element-UI组件库、vue-cli、Vue-router、Vuex等技术。主要实现了页面基本样式、账号登录、歌曲播放、MV播放，个性推荐、歌单、排行榜、歌手、歌曲详情、歌手详情、歌手分类等页面的展示和部分网易云后台数据的获取。项目总体设计思路。
vue-electron制作网易云音乐客户端
05-24
而网易云音乐客户端是一个非常流行的音乐播放器，可以通过 Vue-Electron 来制作一个基于网易云音乐 API 的客户端。 以下是大致的实现步骤： 1. 安装 Vue-Electron 可以通过 npm 包管理器来安装 Vue-Electron： `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_pengliang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值