音乐播放器

运行环境

安装 pnpm

npm i -g pnpm

配置七牛云 [可选]

音乐列表页面会调用七牛云接口，需要提供七牛云相关配置：server/midway/.env.backup，记得把 .env.backup 重命名为 .env

运行项目

同时启动客户端和服务器

# 第一步，安装所有依赖
pnpm install

# 第二步，同时启动客户端与服务器
npm run dev

客户端地址：

• http://localhost:5173

服务器地址：

• http://localhost:7001

功能概览

客户端

• 音乐播放（上一曲/下一曲/暂停/播放/播放模式/音量/快进）
• 音乐列表（本地/在线模式切换）
• 音乐展示（列表/卡片两种形式）
• 主题切换（绿/橙）

服务器

• 获取音乐列表
• 上传音乐

技术栈

客户端

基于 Vue.js 3.x 版本来开发：vue3 分支

• vue.js（渐进式 JavaScript 框架）
• vue-router（Vue.js 的官方路由）
• pinia（Vue.js 的状态管理库）
• vue3-lazy（基于 Vue3.x 的图片懒加载插件）
• sass-bem-next（基于 sass 来编写 BEM 风格样式的包）
• tailwindcss（工具优先的 CSS 框架）
• @icon-park/vue-next（基于 Vue3.x 的 IconPark 图标库插件）

基于 Vue.js 3.x + TSX 来开发：main 分支

基于 React 18.x 版本来开发：react 分支

服务端

基于 Node.js 框架 Midwayjs 来构建服务

项目部署

客户端部署在 Github

服务器部署在 Render

图片、音频存储在 七牛云

后续计划

• Monorepo（支持更多客户端/服务器共存）
• 加入 前端框架
  • Vue3
  • Vue3 + TSX
  • React
• 加入 Node.js 框架
  • Midway.js
  • NestJS