V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sl1673495
V2EX  ›  程序员

Vue 全家桶高仿网易云音乐 mac 客户端版(不像赔十个!)

  •  3
     
  •   sl1673495 · 2019-07-27 17:39:04 +08:00 · 6312 次点击
    这是一个创建于 1706 天前的主题,其中的信息可能已经有所发展或是发生改变。

    音乐播放器虽然烂大街了,但是作为前端没自己撸一个一直是个遗憾,而且偶然间发现 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
        1
    moneyduo  
       2019-07-27 17:40:56 +08:00
    不错啊 打破零回复 狗头
    anky
        2
    anky  
       2019-07-27 17:47:05 +08:00
    很漂亮!不错
    gaigechunfeng
        3
    gaigechunfeng  
       2019-07-27 17:51:31 +08:00   ❤️ 1
    打破零回复。这么掉的项目已经 1000 多星,其实也不用来 V2EX 宣传了。
    总之厉害,我是 mark 了。
    Corbusier
        4
    Corbusier  
       2019-07-27 18:01:39 +08:00 via iPhone
    先码上一个看看
    caijunyi
        5
    caijunyi  
       2019-07-27 18:03:51 +08:00 via Android
    牛逼,先送星!
    ranwu
        6
    ranwu  
       2019-07-27 18:10:28 +08:00
    图片挂了,老铁。
    shanlan
        7
    shanlan  
       2019-07-27 18:30:51 +08:00
    我就问一句,你们 CSS 到底怎么学的?为什么我的 CSS 写不出我想要的结果?
    wu67
        8
    wu67  
       2019-07-27 18:32:18 +08:00
    @shanlan css 需要脑洞和时间积累, 不像 js 可以靠其他语言基础硬啃
    mamahaha
        9
    mamahaha  
       2019-07-27 19:44:54 +08:00
    你这标题我看成了 Vue 全家桶模仿网易云音乐,然后网易云音乐的人不高兴了,派你来发牢骚。
    MMMMMMMMMMMMMMMM
        10
    MMMMMMMMMMMMMMMM  
       2019-07-27 20:02:35 +08:00
    感觉云音乐这种直接用 canvas webgl 整个一起画更省事点
    yaoliyc
        11
    yaoliyc  
       2019-07-27 20:39:43 +08:00 via iPhone
    先收藏了
    cm15006
        12
    cm15006  
       2019-07-27 21:39:39 +08:00 via Android
    已 star
    有电台的话就更棒了
    1239305697
        13
    1239305697  
       2019-07-27 23:00:01 +08:00
    厉害了。已 star
    MinQ
        14
    MinQ  
       2019-07-28 00:00:48 +08:00 via Android
    @mamahaha 笑出声
    xiangyi007
        15
    xiangyi007  
       2019-07-28 17:58:06 +08:00
    已 Star,看起来很好!
    yaoliyc
        16
    yaoliyc  
       2019-07-28 18:25:13 +08:00
    包装成客户端?
    sl1673495
        17
    sl1673495  
    OP
       2019-07-28 21:41:10 +08:00 via iPhone
    @yaoliyc electron 吗
    sl1673495
        18
    sl1673495  
    OP
       2019-07-28 21:41:51 +08:00 via iPhone
    @mamahaha 哈哈哈
    yaoliyc
        19
    yaoliyc  
       2019-07-28 22:04:11 +08:00
    @sl1673495 比较流行的是这个吧。
    sl1673495
        20
    sl1673495  
    OP
       2019-07-29 07:36:46 +08:00 via iPhone
    @shanlan 直接 flex 一把梭
    xiaotuzi
        21
    xiaotuzi  
       2019-07-29 09:57:53 +08:00
    想问下撸了多久做出来的?
    sl1673495
        22
    sl1673495  
    OP
       2019-07-29 10:36:44 +08:00 via iPhone
    @xiaotuzi 上周五启动的项目
    15651980765
        23
    15651980765  
       2019-07-29 11:13:19 +08:00
    给大佬递茶
    lenling
        24
    lenling  
       2019-07-29 11:16:10 +08:00
    克拉斯
    likaka
        25
    likaka  
       2019-07-29 11:34:02 +08:00
    不像呀
    nicoljiang
        26
    nicoljiang  
       2019-07-29 17:56:42 +08:00
    非常喜欢。
    xiaotuzi
        27
    xiaotuzi  
       2019-07-29 23:20:55 +08:00 via iPhone
    @sl1673495 速度很快啊!是不是有什么插件
    sl1673495
        28
    sl1673495  
    OP
       2019-07-30 08:14:18 +08:00 via iPhone
    @xiaotuzi 木有啊 就是比较专心写。多封装些通用的。
    Ui 库是用 eelemen 也省了不少事
    sl1673495
        29
    sl1673495  
    OP
       2019-07-30 08:14:38 +08:00 via iPhone
    @xiaotuzi element
    sl1673495
        30
    sl1673495  
    OP
       2019-07-30 15:48:29 +08:00
    cd 页优化了一下 加了推荐歌单和相似歌曲
    sl1673495
        31
    sl1673495  
    OP
       2019-07-30 20:51:29 +08:00
    添加了 rem 支持,对大屏幕更友好
    sl1673495
        32
    sl1673495  
    OP
       2019-07-30 22:39:35 +08:00
    附言更新了预览图片
    yukiloh
        33
    yukiloh  
       2019-12-13 12:21:50 +08:00 via Android
    雾草 13k 的项目…
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1386 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 23:40 · PVG 07:40 · LAX 16:40 · JFK 19:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.