摘要:前言使用构建的移动端网页有搜索播放和歌单功能。整体就是网易云音乐官网的,部分组件用到了。播放功能就一个组件没写多带带页面,用的是原生的。爬取网易云音乐的地址。
前言 使用vue cli3构建的SPA移动端网页,有搜索、播放、和歌单功能。 整体UI就是网易云音乐官网的,部分组件用到了vux。播放功能就一个组件没写多带带页面,用的是原生的H5。
在线预览</>复制代码
爬取网易云音乐的api地址。
点击这里预览,PC端推荐在chrome调试模式下预览,手机端直接点击链接。
网页效果截图:
源码解析src目录解析:
</>复制代码
│ App.vue
│ main.js
│ router.js
│
├─api //api配置文件夹
│ common.js
│ config.js
│
├─assets //静态图片资源
│ find.svg
│ hot_bg.jpg
│ hot_icon.png
│ play.png
│
├─components
│ ├─HomeBottom //主页底部组件
│ │ foot.svg
│ │ footbg.png
│ │ index.vue
│ │
│ ├─HomeTop //主页头部组件
│ │ index.vue
│ │ logo.svg
│ │
│ ├─HotWord //热门搜索词
│ │ index.vue
│ │
│ ├─MusicPlayer //播放器组件
│ │ index.vue
│ │
│ ├─RecommendList //推荐歌单
│ │ index.vue
│ │
│ ├─SongItem //歌曲组件
│ │ index.vue
│ │
│ ├─TabIndex //tab的首页
│ │ index.vue
│ │
│ ├─TabRank //tab的排行榜页
│ │ index.vue
│ │
│ └─TabSearch //tab的搜索页
│ index.vue
│
├─store //vuex
│ actions.js
│ getters.js
│ index.js
│ mutation-types.js
│ mutations.js
│ state.js
│
├─styles
│ playlist_page.css
│ remd_list.css
│ song_item.css
│
└─views
HomePage.vue //主界面
PlayListPage.vue //歌单页
技术栈:vuex vue-router vux(UI库) axios
</>复制代码
新手学vue,代码肯定有很多糟糕的地方.如果不嫌弃可以给个Star
github项目地址,前端小江
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/108644.html
摘要:库用了魔改样式的歌词滚动部分用了黄轶老大的贼爽主题换肤用的变量替换。语言的下一代标准预处理器安装与使用前端项目后端项目 音乐播放器虽然烂大街了,但是作为前端没自己撸一个一直是个遗憾,而且偶然间发现pc端web版的网易云音乐做的实在是太简陋了,社区仿pc客户端的网易云也不多见,为了弥补这个遗憾,就用vue全家桶模仿mac客户端的ui实现了一个,欢迎提出意见和star~ 预览地址 源码地址...
摘要:项目地址暂时只实现了基本功能加了一点微小的效果主要适配浏览器对和做了一点微小的适配现在已经包括了打包平台的功能了源码地址项目预览项目描述前端部分整体加载进度懒加载模块的加载中提示实现了滑块增量分页新曲等使用了做单页应用使用了处理路由使用了管 项目地址 暂时只实现了基本功能 加了一点微?小的效果 主要适配pc浏览器 对android 和ios 做了一点微?小的适配 现在已经包括了ele...
摘要:项目地址暂时只实现了基本功能加了一点微小的效果主要适配浏览器对和做了一点微小的适配现在已经包括了打包平台的功能了源码地址项目预览项目描述前端部分整体加载进度懒加载模块的加载中提示实现了滑块增量分页新曲等使用了做单页应用使用了处理路由使用了管 项目地址 暂时只实现了基本功能 加了一点微?小的效果 主要适配pc浏览器 对android 和ios 做了一点微?小的适配 现在已经包括了ele...
阅读 714·2021-11-24 09:39
阅读 3581·2019-08-30 15:53
阅读 2595·2019-08-30 15:44
阅读 3311·2019-08-30 12:54
阅读 2308·2019-08-29 12:23
阅读 3375·2019-08-26 14:05
阅读 2179·2019-08-26 13:36
阅读 3519·2019-08-26 13:33