体验Vue3.0, 仿一个网易云音乐客户端

13,638 阅读2分钟

体验Vue3.0, 仿一个网易云音乐客户端

前言

缘起19年的夏天,在掘金上刷到大佬神三元了一篇react hooks+redux+immutable.js打造网易云音乐精美webApp,当时恰好正在学react,就跟着大佬的脚步开始了模仿之路,从此一发不可收拾.而后自己也用react写了个客户端的网页(网易云的前一个版本的布局).现在,因为后面就职的公司的技术栈用的是vue,虽然现在播放器烂大街,但是我觉得这个题材的用来练手是不错的,所以趁着3.0发布,借此学习一波!

代码地址

谷歌浏览器与新版edge打开效果更好哟!

一、用到的技术栈

前端:

  • vue3.0全家桶:(ts+jsx)
  • vuex: vuex-module-decorators
  • swiper:非常受欢迎与实用的轮播图插件,swiper
  • create-keyframe-animation: 关键帧动画插件
  • axios: 数据请求

后端:

其他:

  • stylelint、stylelint-config-standard、stylelint-order:分别是css规范检测工具、推荐配置、属性排序插件

二、项目整体结构与部分演示

基本结构

结构

1、推荐模块与歌单相关模块部分

歌单

2、歌手模块、排行榜与最新音乐部分

歌手

3、榜单与播放器部分

播放器

4、搜索与视频相关部分

搜索

三、不足

其实还有很多地方没有完善的,例如主题切换,想过用css变量来做,但是因为觉得需要替换的地方太多了就阉割了,以及下拉刷新的地方做的也不好,没有做虚拟滚动,图片没有各个默认图等等...

四、最后

平常自己没少刷掘金,看了很多大佬写的代码,觉得自己写的确实还差很多,所以代码规范、代码风格可能也不如人意,如果有不好的地方欢迎大家指出改进,不胜感谢!

参考链接