vue 进度条_高仿网易云音乐Vue实战项目,采用第三方库ElementUI实现代码编写

作者:Lambda_

链接:https://juejin.im/post/5d96dd9d51882509563a096e

3d5da7027d7ec74d27460600d67c3aa2.png

ElementUI一般是PC端采用,如果是vant等移动端UI库就好了~~~~

技术栈

主要依赖

  • Vue 全家桶(使用 Vue-cli 作为构建工具)
  • WebPack4.0
  • ES6
  • Less
  • ESLint
  • ElementUI

目标功能

  • 手机登录、注册
  • 修改密码
  • 我的页面歌单信息
  • 添加,删除歌单
  • 最近播放
  • 心动模式
  • 我的电台
  • 我的收藏
  • 发现页面推荐歌单
  • 发现页面新碟
  • 发现页面新歌
  • 发现页面每日推荐
  • 发现页面歌单
  • 歌单广场
  • 新歌推荐
  • 更多新碟--新增
  • 发现页面排行榜
  • 发现页面电台
  • 发现页面私人FM
  • 搜索功能
  • 搜索结果展示
  • 热搜榜
  • 历史记录
  • 搜索推荐
  • 歌手分类
  • 播放功能(小播放器进度条)
  • 播放列表
  • 添加删除播放列表
  • 歌曲mv播放
  • 签到
  • 歌曲喜欢与否
  • 专辑收藏与否
  • 相关评论
  • 用户相关
  • 用户设置
  • 页面滚动加载
  • 左右滑动切换
  • 全面优化&修复

部分截图

侧边账户中心

b39688ed1643175ade31105c9de9c946.png

发现页面&每日推荐

b489754d4022b55b9c2aac3576f1dead.gif

歌单&歌单详情

e4baab1371b910e08201ac82349a97aa.gif

排行榜&排行榜信息

6f55380e62365688b8598fd7634a9bb0.gif

我的页面&最近播放

aa31c572bc54481f31c50ab8d6f2c019.gif

搜索展示

a970cf741a77087cf469dedeb9f7d8bd.gif

启动步骤

  1. npm install
  2. npm run dev (本地开发)
  3. npm run build (生产环境打包)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值