🚀 快速开始
📋 环境要求
- Node.js >= 22
- pnpm >= 10（推荐）
📦 安装 Node.js
方式一：官网下载（推荐新手）
- 访问 Node.js 官网
- 下载 v22.x.x LTS 版本的 Windows 安装包（
.msi） - 双击安装，一路点击 "Next" 即可
方式二：使用 nvm-windows 版本管理器
- 访问 nvm-windows 发布页
- 下载最新版
nvm-setup.exe并安装 - 重启终端后执行：
powershell
# 安装 Node.js 22
nvm install 22
# 使用 Node.js 22
nvm use 22🍎 macOS / Linux 用户
bash
# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
# 重启终端后安装 Node.js 22
nvm install 22
nvm use 22📦 安装 pnpm
powershell
# 使用 npm 安装（推荐）
npm install -g pnpm
# 或使用 corepack（Node.js 内置）
corepack enable
corepack prepare pnpm@latest --activate✅ 验证安装
powershell
node -v # 应输出 v22.x.x 或更高
pnpm -v # 应输出 10.x.x 或更高🔧 安装与启动
bash
# 克隆项目
git clone https://github.com/XiangZi7/GlassMusicPlayer.git
cd GlassMusicPlayer
# 安装依赖
pnpm install
# 启动开发服务器
pnpm dev开发服务器默认运行在 http://localhost:5089。
⚙️ 环境配置
在项目根目录创建 .env 文件：
bash
# 网易云音乐 API 地址
VITE_APP_BASE_API = 'https://your-netease-api-server.com'
# 路由模式（可选：hash / history）
VITE_ROUTER_MODE = 'hash'
# 公共路径（可选，默认 /）
VITE_PUBLIC_PATH = '/'🌐 API 服务端
本项目依赖 网易云音乐 API，你需要自行部署一个 API 服务或使用公共实例。
📦 构建部署
bash
# 生产构建
pnpm build
# 预览构建产物
pnpm preview构建产物位于 dist/ 目录，可部署至任意静态服务器（Nginx、Netlify、Vercel 等）。
📜 常用脚本
| 命令 | 说明 |
|---|---|
pnpm dev | 🚀 启动开发服务器 |
pnpm build | 📦 生产构建 |
pnpm build:test | 🧪 测试环境构建 |
pnpm preview | 👀 预览构建产物 |
pnpm lint | 🔍 ESLint 检查 |
pnpm format | ✨ Prettier 格式化 |
🛠️ 技术栈
| 类别 | 技术 |
|---|---|
| 🖼️ 框架 | Vue 3.5 + TypeScript 5 |
| ⚡ 构建 | Vite 7 |
| 🎨 样式 | Tailwind CSS 4 + SCSS |
| 🗄️ 状态管理 | Pinia 3 |
| 🛤️ 路由 | Vue Router 4 |
| 🌍 国际化 | Vue I18n 11 |
| 🎬 动画 | GSAP + Lottie |
| 📺 视频播放 | Artplayer + HLS.js |
| 🌌 3D/背景 | Three.js + OGL |
| 🌐 HTTP | Axios |