Vue-Chicken-Music

Welcome to Vue-Chicken-Music 👋

🚀 如何运行

# 克隆
git clone https://github.com/tmflsby/Vue-Chicken-Music.git

# 打开项目目录
cd Vue-Chicken-Music
cd vue-chicken-music

# 安装依赖
npm install

# 开启本地服务运行项目
npm run serve

项目演示

demo地址（请用chrome手机模式预览）

项目页面及功能

• 推荐页面

• 歌手页面

• 排行页面

• 搜索页面

• 详情页 「包括歌手详情、歌单详情、排行详情」

• 播放器页面 「包含歌词页面」

• 歌单列表页面

• 添加歌曲页面

• 个人中心页面

👍推荐页面

• 每日推荐的海报以轮播图的形式展现(轮播图接口有点问题)

• 热门歌单推荐

👨‍🎤歌手页面

• 歌手按热门和开头字母的顺序排序

• 页面右侧有相应的位置提醒，也可以直接点击右侧导航栏快速导航

📓排行页面

• 歌曲的分类排行

🔍搜索页面

• 热门搜索关键词提示

• 搜索栏(搜索到的歌曲音频url为undefined)

• 历史搜索

📄详情页

• 用于展示歌单、歌手、排行榜中的一些信息和包含的歌曲

🎵播放器页面

• 控制按钮「播放、暂停、快进、快退、列表循环播放，单曲播放、随机播放，添加喜欢」(切换播放模式有BUG)

• 海报和歌词的展示

• 歌曲进度条

• 缩小版播放器

🔘歌单列表

• 由缩小版播放器点击歌单进入，可以添加歌曲进入播放列表或者删除歌单歌曲

🎹添加歌曲页面

• 搜索歌曲

• 最近播放

• 搜索历史

🙍用户中心页面

• 我喜欢的歌曲列表

• 最近听的歌曲列表

• 随机播放全部按钮

实用的组件

通用组件包括如下

• 滚动组件
• loading 组件
• 确认组件
• noResult 组件
• switch组件

还有一些是为本项目量神订做的组件，与上面的通用组件都在 src/base 目录下

作者

👤 LiuYang(tmflsby----帅洋)

项目课程

👤 ustbhuangyi(黄轶)

🚀 demo地址

🚀 课程地址