vue 做的酷狗音乐网页版 ,酷狗音乐网页版,ui界面模仿原生酷狗音乐

前言:最近闲的有点蛋疼,因为平时对音乐挺感兴趣的,而且搜了一下网上基本上很少有酷狗版的音乐播放器(仿酷狗ios界面)所以就想当第一人,做一做,一、为了学习vue知识,二、强迫症没有网页版iso页面。

项目名称:咕咚音乐

简介:KG-music,基于vuecli3构建的包含移动web端、androidApp、ios暂未涉及,本项目完全参照酷狗音乐app页面设计,一个实现浏览器端的web 酷狗音乐App

此项目大小还在编写中具体,涉及、登录、歌曲列表、播放、歌曲列表,mv,搜索.....等等,本人实在太懒,很多功能就不列出来了,基本理念是实现酷狗类似的功能,所以大家都清楚;是一个完整的流程。

项目地址:项目开源至github

                 https://github.com/202780181/gudong-music

线上地址:www.gdongpay.com   (可以访问,请使用手机模式打开)试听请点击首页的歌单列表听歌。

项目后台:后台是采用github开源网易云音乐Api接口,给大家贡献一下

                 www.gdongpay.com/API

技术栈:vue全家桶、还包括一些其他的插件库,可以打开项目main.Js 查看所有的插件

Andriod版本:安卓版App是使用Cordova打包的andriod App  项目根目录有一个APK目录安卓包,欢迎安装(#^.^#)

说明:

如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢! ^_^

此项目目前由我一个人编写项目还在编写中,还有很多功能没有实现,愿景是接近原版酷狗音乐

项目截图: 

                 

                  

项目为全面实现酷狗音乐而努力

项目已暂停编辑

  • 6
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
抖音私信界面和通知界面都是比较复杂的UI界面,需要用到Vue3的一些高级特性和组件库来实现。以下是一个简单的实现思路: 1. 使用Vue3的Composition API来组织代码,使用Vue Router实现路由导航。 2. 使用Element Plus组件库来实现UI界面,包括Tab标签页、列表、卡片、消息提示等。 3. 使用axios库发送HTTP请求获取数据,并使用Vue3的响应式数据特性来更新UI界面。 4. 使用Vue3的动画特性来实现平滑的过渡效果。 下面是一个简单的实现示例,仅供参考: ``` <template> <div class="container"> <el-tabs v-model="activeTab"> <el-tab-pane label="私信" name="private"> <div class="private-messages"> <el-list v-if="privateMessages.length > 0"> <el-list-item v-for="(message, index) in privateMessages" :key="index"> <el-card :body-style="{ padding: '20px' }"> <div slot="header" class="clearfix"> <span>{{ message.sender }}</span> <time class="fr">{{ message.time }}</time> </div> <div class="message-content">{{ message.content }}</div> </el-card> </el-list-item> </el-list> <div v-else class="no-messages">暂无私信消息</div> </div> </el-tab-pane> <el-tab-pane label="通知" name="notification"> <div class="notifications"> <el-list v-if="notifications.length > 0"> <el-list-item v-for="(notification, index) in notifications" :key="index"> <el-card :body-style="{ padding: '20px' }"> <div slot="header" class="clearfix"> <span>{{ notification.title }}</span> <time class="fr">{{ notification.time }}</time> </div> <div class="notification-content">{{ notification.content }}</div> </el-card> </el-list-item> </el-list> <div v-else class="no-notifications">暂无通知</div> </div> </el-tab-pane> </el-tabs> </div> </template> <script> import { ref, reactive } from 'vue' import axios from 'axios' import { ElTabs, ElTabPane, ElList, ElListItem, ElCard } from 'element-plus' export default { components: { ElTabs, ElTabPane, ElList, ElListItem, ElCard }, setup() { const activeTab = ref('private') const privateMessages = reactive([]) const notifications = reactive([]) axios.get('/api/private-messages').then((response) => { privateMessages.push(...response.data) }) axios.get('/api/notifications').then((response) => { notifications.push(...response.data) }) return { activeTab, privateMessages, notifications } } } </script> <style scoped> .container { padding: 20px; } .private-messages, .notifications { padding: 20px; } .no-messages, .no-notifications { text-align: center; font-size: 16px; color: #999; padding: 20px; } .message-content, .notification-content { margin-top: 20px; font-size: 14px; } </style> ``` 注意:以上示例代码仅为演示Vue3和Element Plus的使用方法,实际开发中需要根据具体需求进行修改和完善。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值