如果链接失效，请在工单中心及时反馈
网盘类型：阿里云盘
下载链接：
项目概览
项目名称：Vite + Vue3 + TypeScript + Sass 手写音乐播放器
项目类型：前端实战项目 / 开源学习资源
技术栈：Vite、Vue 3、TypeScript、Sass
核心亮点：
- 零UI库依赖，从零手写组件
- 完整TypeScript类型支持
- 工程化目录结构，贴近企业级开发规范
- 适合进阶学习与面试项目包装
核心功能模块
该播放器项目并非简单的Demo堆砌，而是构建了一个功能完整的音乐播放核心闭环：
- 播放控制：涵盖播放/暂停、上一曲/下一曲、进度条拖拽与点击跳转。进度条组件的实现细节（如缓冲条、播放进度条、滑块交互）是考察DOM事件处理与样式联动能力的绝佳范本。
- 播放模式：内置列表循环、单曲循环、随机播放三种模式。其状态管理逻辑（模式切换与播放列表索引重排）是锻炼
ref、computed响应式思维的优质案例。 - 歌词系统：支持逐行歌词高亮滚动。通过
requestAnimationFrame或timeupdate事件驱动歌词索引切换，并利用scrollIntoView或transform实现歌词平滑滚动，是项目中的技术亮点。 - 音量控制：包含音量滑块调节与静音切换，涉及Icon状态切换与范围输入框样式重写（Slider组件二次封装）。
- 播放列表：展示当前队列，支持点击切歌与删除歌曲，需要处理列表项激活态与空列表兜底UI。
深度技术拆解：为什么值得学习
该项目最核心的价值在于“去框架化”的组件设计思路。你会学习到如何在不使用Element Plus等组件库的情况下，解决以下真实业务痛点：
- 自定义进度条：原生
样式简陋且跨浏览器不一致。项目中通常采用mousedown、mousemove、mouseup事件组合或Pointer Events API，结合getBoundingClientRect()计算点击坐标对应的播放百分比。这比直接使用组件库的Slider更能理解底层原理。 - Vue 3 组合式API的工程化应用：你会看到如何将音频逻辑拆分为
usePlayer、useLyric、usePlaylist等独立的Composables（组合式函数）。这种抽离逻辑的方式是Vue 3项目架构的核心，直接决定代码的可维护性和可测试性。 - TypeScript的类型体操实战：不仅仅是简单的
interface定义。对于Audio对象的事件类型、歌词解析后的数据结构（时间戳与文本的映射）、以及播放模式的联合类型（type PlayMode = 'order' | 'loop' | 'random'），都需要严谨的类型约束，提前规避运行时错误。 - Sass的高级用法：利用
@mixin封装动画、@for循环生成进度条小点、通过$variables统一管理主题色。相比纯CSS，Sass在应对播放器大量动态状态（如激活色、模糊背景）时效率极高。
资源内容与食用指南
该资源压缩包内通常包含完整的src目录源码、package.json配置文件以及必要的README说明。
- 环境要求：确保本地Node.js版本 >= 16.0。
- 启动步骤：解压后，在根目录执行
npm install安装依赖，随后运行npm run dev即可在本地启动开发服务器预览效果。 - 进阶建议：拿到源码后，不要急于运行。建议先阅读
src/store或hooks目录下的核心逻辑文件，尝试自己画一遍状态流转图。你可以尝试添加“喜欢歌曲”列表或“定时关闭”功能作为练手，检验自己是否真正吃透了代码逻辑。
推荐理由与适用人群
适用人群：
- 掌握Vue2或Vue3基础语法，但尚未接触过完整项目架构的进阶学习者。
- 正在筹备面试，需要实战项目来展示自己对TypeScript类型系统与组合式API深刻理解的开发者。
- 对音乐类App交互有浓厚兴趣，希望复刻网易云音乐或QQ音乐核心播放页面的前端爱好者。
客观评价：
- 优点：代码风格清晰，组件粒度划分合理，摈弃了无意义的UI框架依赖，直击播放器核心逻辑，学习性价比极高。
- 待完善点：由于是手写项目，可能未适配移动端触摸事件，且未接入真实音乐API（通常为本地静态音频链接或占位音频）。建议自行替换音频源，并增加
PWA或响应式布局作为额外加分项。
