2022 Electron21+Vue3+ElementPlus仿网易云客户端实战分享(一)

481 阅读2分钟

项目主页

仿网易云音乐,目前支持Web/客户端,客户端目前仅支持Windows端。以后会支持Mac,Linux端。

当前项目地址

功能:

  • 桌面歌词(客户端)
  • mini模式(客户端)
  • 自定义托盘右键菜单(客户端)
  • 任务栏缩略图,歌曲操作(客户端)
  • 黑夜/白天模式
  • 浏览器启动客户端(客户端)
  • 最小化/最大化/关闭应用(客户端)
  • 个性推荐,专属定制,歌手,列表模式切换,播客,视频,关注,话题,直播,私人FM,私信,本地歌曲匹配(客户端),音乐匹配(客户端),下载,最近播放,音乐云盘,收藏,歌单,粉丝,关注,动态,歌曲,搜索,高亮显示搜索关键词,资料设置
  • 心动模式,下一首播放,上一首播放,列表/随机/单曲/顺序循环,单曲播放,播放全部(列表)
  • 右键菜单,对于每一个页面都有不一样的右键菜单
  • 首页栏目调整(组件拖拽)
  • 启动页(客户端)
  • 基于Github的Action工作流,实现自动更新/手动更新的功能
  • ...

未来开发的功能:

  • 音频可视化
  • 手动/自动检查更新
  • 自定义安装界面
  • 离线/在线检测与桌面通知
  • 拖拽播放
  • 文件关联
  • 快捷键(全局)
  • ...

技术栈:

  • Vue3
  • vue-router@4
  • pinia
  • axios
  • qrcode.vue
  • mitt
  • element-plus
  • element-china-area-data
  • electron-store
  • vueuse
  • vue3-menus
  • vuedraggable
  • vite
  • typescript
  • sass
  • electron
  • ...

后端准备工作

  1. 先将NeteaseCloudMusicApi项目下载下来
  2. 安装依赖 然后启动

客户端相关准备工作

  1. 安装依赖
  2. 执行命令npm run dist打包,就可以在release下面找到可执行程序。
  3. 如果要在开发环境运行,那么就执行命令npm run dev

系统一些截图:

loading.gif

page1.gif

page2.png

page3.png

page4.png

page5.gif

page6.png

page7.png

page8.png

page9.gif

page10.png

page11.png

page12.gif

page14.gif

page15.gif

page16.png

page17.gif

page18.png

page19.gif

结语

当前这篇文章只是展示了一下应用的界面和如何运行,下一篇会开始介绍应用如何开始构建。