Vue 全家桶高仿网易云音乐 mac 客户端版（不像赔十个！）

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1939 天前的主题，其中的信息可能已经有所发展或是发生改变。

音乐播放器虽然烂大街了，但是作为前端没自己撸一个一直是个遗憾，而且偶然间发现 pc 端 web 版的网易云音乐做的实在是太简陋了，社区仿 pc 客户端的网易云也不多见，为了弥补这个遗憾，就用 vue 全家桶模仿 mac 客户端的 ui 实现了一个，欢迎提出意见和 star~

预览地址

源码地址

进度

搜索歌曲+播放（版权歌曲无法播放)
发现页
播放列表
全部歌单
最新音乐
cd 页（评论区才是灵魂）
主题换肤功能

后端接口

https://binaryify.github.io/NeteaseCloudMusicApi

技术栈

Vue 全家桶 vue-cli3 create 出来的。
ui 库用了魔改样式的 element-ui
歌词滚动部分用了黄轶老大的 better-scrool （贼爽）
主题换肤用的 css 变量替换。
ES 6 / 7 （ JavaScript 语言的下一代标准）
Sass （ CSS 预处理器）

Screenshots

歌曲页面

歌单详情

安装与使用

前端项目

npm i
npm run serve

后端项目

node app.js

第 1 条附言 · 2019-07-30 22:37:47 +08:00

推荐页面

歌单详情

第 2 条附言 · 2019-08-20 21:07:57 +08:00

更新版本，加入了 mv 播放功能。
http://shanshihao.cn/mv/10883392

33 条回复 • 2019-12-13 12:21:50 +08:00

moneyduo

2019-07-27 17:40:56 +08:00

不错啊打破零回复狗头

anky

2019-07-27 17:47:05 +08:00

很漂亮！不错

gaigechunfeng

2019-07-27 17:51:31 +08:00

打破零回复。这么掉的项目已经 1000 多星，其实也不用来 V2EX 宣传了。
总之厉害，我是 mark 了。

Corbusier

2019-07-27 18:01:39 +08:00 via iPhone

先码上一个看看

caijunyi

2019-07-27 18:03:51 +08:00 via Android

牛逼，先送星！

ranwu

2019-07-27 18:10:28 +08:00

图片挂了，老铁。

shanlan

2019-07-27 18:30:51 +08:00

我就问一句，你们 CSS 到底怎么学的？为什么我的 CSS 写不出我想要的结果？

wu67

2019-07-27 18:32:18 +08:00

@shanlan css 需要脑洞和时间积累, 不像 js 可以靠其他语言基础硬啃

mamahaha

2019-07-27 19:44:54 +08:00

你这标题我看成了 Vue 全家桶模仿网易云音乐，然后网易云音乐的人不高兴了，派你来发牢骚。

MMMMMMMMMMMMMMMM

2019-07-27 20:02:35 +08:00

感觉云音乐这种直接用 canvas webgl 整个一起画更省事点

yaoliyc

2019-07-27 20:39:43 +08:00 via iPhone

先收藏了

cm15006

2019-07-27 21:39:39 +08:00 via Android

已 star
有电台的话就更棒了

1239305697

2019-07-27 23:00:01 +08:00

厉害了。已 star

MinQ

2019-07-28 00:00:48 +08:00 via Android

@mamahaha 笑出声

xiangyi007

2019-07-28 17:58:06 +08:00

已 Star,看起来很好！

yaoliyc

2019-07-28 18:25:13 +08:00

包装成客户端？

sl1673495

2019-07-28 21:41:10 +08:00 via iPhone

@yaoliyc electron 吗

sl1673495

2019-07-28 21:41:51 +08:00 via iPhone

@mamahaha 哈哈哈

yaoliyc

2019-07-28 22:04:11 +08:00

@sl1673495 比较流行的是这个吧。

sl1673495

2019-07-29 07:36:46 +08:00 via iPhone

@shanlan 直接 flex 一把梭

xiaotuzi

2019-07-29 09:57:53 +08:00

想问下撸了多久做出来的？

sl1673495

2019-07-29 10:36:44 +08:00 via iPhone

@xiaotuzi 上周五启动的项目

15651980765

2019-07-29 11:13:19 +08:00

给大佬递茶

lenling

2019-07-29 11:16:10 +08:00

克拉斯

likaka

2019-07-29 11:34:02 +08:00

不像呀

nicoljiang

2019-07-29 17:56:42 +08:00

非常喜欢。

xiaotuzi

2019-07-29 23:20:55 +08:00 via iPhone

@sl1673495 速度很快啊！是不是有什么插件

sl1673495

2019-07-30 08:14:18 +08:00 via iPhone

@xiaotuzi 木有啊就是比较专心写。多封装些通用的。
Ui 库是用 eelemen 也省了不少事

sl1673495

2019-07-30 08:14:38 +08:00 via iPhone

@xiaotuzi element

sl1673495

2019-07-30 15:48:29 +08:00

cd 页优化了一下加了推荐歌单和相似歌曲

sl1673495

2019-07-30 20:51:29 +08:00

添加了 rem 支持，对大屏幕更友好

sl1673495

2019-07-30 22:39:35 +08:00

附言更新了预览图片

yukiloh

2019-12-13 12:21:50 +08:00 via Android

雾草 13k 的项目…