vue实现网易云音乐纯界面

目录
  • 项目简介
  • 使用姿势
  • 项目结构
  • 界面截图
    • 登录页
    • 发现
    • 播客
    • 我的
    • 关注
    • 搜索

项目简介

使用 Vue Cli + Vue3 + Vant3 编写

【Github地址：github.com/cloudmoonoc…】

【网易云音乐接口地址：neteasecloudmusicapi.vercel.app】

使用姿势

 npm install
 npm run serve

项目结构

  • 存在部分问题，在README中
 ├─public
 └─src
     ├─Api (接口[未做])
     │
     ├─assets
     │  ├─icons (图标)
     │  └─images (图片)
     │      ├─Error
     │      └─Found
     │
     ├─components (组件)
     │  ├─MyFooter (底部标签页)
     │  ├─MyHeader (顶部标题栏，包含侧边栏)
     │  └─Tip (最底部提示)
     │
     ├─pages (页面)
     │  ├─Attention (关注)
     │  ├─CloudSquare (云村[未做，无接口])
     │  ├─Error (404)
     │  │
     │  ├─Found (发现页)
     │  │  ├─DailyRecommendation (每日推荐)
     │  │  │
     │  │  ├─DigitalAlbum (数字专辑)
     │  │  │  ├─AlbumBuy (已购[单曲])
     │  │  │  ├─HotList (畅销榜)
     │  │  │  └─MusicLanguage (语种风格馆)
     │  │  │
     │  │  ├─FocusNewMusic (关注新歌[未做，调用数据后再做])
     │  │  ├─MusicHouse (歌房[未做，无接口])
     │  │  ├─MusicList (歌单[只有八个选项])
     │  │  ├─PrivateFM (私人FM)
     │  │  ├─RankingList (排行榜[未做，无接口])
     │  │  └─SoundBook (有声书[未做，无接口])
     │  │
     │  ├─Index (登录[1])
     │  │  └─PhoneSignIn [手机登录]
     │  │
     │  ├─MyIndex (我的)
     │  │  ├─Buy (已购[单曲])
     │  │  ├─CloudPan (云盘[未做，无接口])
     │  │  ├─Collection-Praise (收藏和赞)
     │  │  ├─Friends (我的好友)
     │  │  ├─Index-Podcast (我的播客[未做，无接口])
     │  │  ├─Local-Download (本地/下载[未做，无接口])
     │  │  ├─MusicBottle (音乐罐子[未做，无接口])
     │  │  └─Rencently (最近播放)
     │  │
     │  ├─Podcast (播客[全部分类])
     │  │  ├─AllCategories (全部分类)
     │  │  ├─FM (广播电台[未做，无接口])
     │  │  ├─MyPodCast (我的播客[未做，无接口])
     │  │  ├─NightSleep (助眠解压[未做，无接口])
     │  │  ├─PodcastRankingList (排行榜[未做，无接口])
     │  │  └─SoundBook (有声书[未做，无接口])
     │  │
     │  └─Search (搜索)
     │
     ├─routers (路由)
     │
     └─store (仓库[未做])
         ├─Attention
         ├─Found
         ├─modules
         ├─MyIndex
         ├─Podcast
         └─Search

界面截图

登录页

发现

播客

我的

关注

搜索

以上就是vue实现网易云音乐纯界面的详细内容，更多关于vue 网易云音乐界面的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Vue实现聊天界面

    Vue实现聊天界面

    本文实例为大家分享了Vue实现聊天界面展示的具体代码,供大家参考,具体内容如下 1.功能需求 根据索引选择跟不同的人进行聊天 2.代码展示 mock.js: import Mock from 'mockjs' Mock.mock("/chatchild",{ 'result':[ { id:"001", imgurl:"/static/image/10.jpg", name:"XKDK", date:"09:23&q

  • Vue3 列表界面数据展示详情

    Vue3 列表界面数据展示详情

    目录 一.列表界面展示示例 2.进行数据显示 2.1.组件在列表显示 2.2.接口返回数据在列表显示 2.3.接口数据改造 2.4.list列表一行显示为多条数据 2.5.列表内容前图标样式修改 一.列表界面展示示例 现在要做的就是把打到页面的数据,带样式,也就是说好看点显示. 之前我们在<Vue3(二)集成Ant Design Vue>这篇文章中,有提及组件的使用,对于一个前端不是很好(后端也不咋的),本着拿来主义,我们能现成的是最好.最省事的方式了. 直白点说就是,找Ant Design

  • vue路由跳转了但界面不显示的问题及解决

    目录 路由跳转了但界面不显示 路由明明配置好了页面还是不显示 路由跳转了但界面不显示 没有在父路由加上router-view,加上下面的代码即可. <!-- 路由匹配到的组件将显示在这里 --> <router-view></router-view> 路由明明配置好了页面还是不显示 在开发vue项目时,使用vue-router 路由老失效 问题代码 Vue.use(VueRouter) var routeslist=[   {     path:'/',     red

  • 如何利用vue+element ui实现好看的登录界面

    如何利用vue+element ui实现好看的登录界面

    目录 界面效果图 下面直接上代码: 附加背景图片 总结 闲暇之余使用vue+element ui制作了个登录界面 话不多说,先上 界面效果图 下面直接上代码: <template> <div class="loginbody"> <div class="logindata"> <div class="logintext"> <h2>Welcome</h2> </div&

  • vue仿网易云音乐播放器界面的简单实现过程

    vue仿网易云音乐播放器界面的简单实现过程

    由于工作项目的需要,需要使用到歌曲播放,参考多方资料,写了一个仿网易云音乐播放界面,能完整的实现音乐播放功能. 前端简单的使用vue组件和audio标签实现了播放器界面,后端则是调用网易云的API获取对应的歌曲信息.  废话不多说上代码 歌曲播放界面(musicPlay.vue) <template> <div class="main-page"> <audio :src="songInfo.url" id="music&qu

  • vue实现网易云音乐纯界面

    vue实现网易云音乐纯界面

    目录 项目简介 使用姿势 项目结构 界面截图 登录页 发现 播客 我的 关注 搜索 项目简介 使用 Vue Cli + Vue3 + Vant3 编写 [Github地址:github.com/cloudmoonoc…] [网易云音乐接口地址:neteasecloudmusicapi.vercel.app] 使用姿势 npm install npm run serve 项目结构 存在部分问题,在README中 ├─public └─src ├─Api (接口[未做]) │ ├─assets │

  • vue模仿网易云音乐的单页面应用

    说明 一直想做一个基于VUE的项目,但是因为项目往往要涉及到后端的知识(不会后端真的苦),所以就没有一直真正的动手去做一个项目. 直到发现GitHub上有网易云音乐的api NeteaseCloudMusicApi,才开始动手去做. 仅仅完成了首页,登入,歌单,歌曲列表页. 项目地址 https://github.com/qp97vi/music 项目成功运行还要把后端api在本地运行 前端技术栈 vue2+vuex+vue-router+axios+mint-ui+webpack 遇到的问题

  • Android仿网易云音乐播放界面

    Android仿网易云音乐播放界面

    现在很多的播放器的播放界面都是采用光盘的转动,下面是我仿造网易的播放界面.先上两张图: 第一张为播放前的界面,第二张为点击播放按钮的图片.布局文件如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent&quo

  • Android5.0以上实现全透明的状态栏方法(仿网易云界面)

    Android5.0以上实现全透明的状态栏方法(仿网易云界面)

    Android4.4以上要实现沉浸式状态栏可以通过在style文件设置 <style name="AppTheme.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> <item name="android:windowTransluc

  • Android实现网易云推荐歌单界面

    Android实现网易云推荐歌单界面

    目录 前言 一.实现 1.自定义一个圆角图片控件(也可直接使用第三方框架) 2.进行布局摆设 3.图片切换动画效果 二.实现效果展示 三.总结 先来看看网易云APP的效果: 前言 关于网易云音乐推荐歌单界面的实现 一.实现 1.自定义一个圆角图片控件(也可直接使用第三方框架) 由于是一些简单的绘制,就不一一介绍了,直接上代码. public class MellowImageView extends ImageView { private Paint paint; public MellowIm

  • vue实现的网易云音乐在线播放和下载功能案例

    vue实现的网易云音乐在线播放和下载功能案例

    本文实例讲述了vue实现的网易云音乐在线播放和下载功能.分享给大家供大家参考,具体如下: 效果如图: 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"

  • Vuejs仿网易云音乐实现听歌及搜索功能

    Vuejs仿网易云音乐实现听歌及搜索功能

    前言 前端时间学了vue,一开始看了vue1.0,后来实在觉得技术总得实践,就直接上手vue2.0.然后花了将近一周时间做了一个网易云音乐的小项目.一开始觉得项目比较小,没必要用vuex所以就没有使用,但是后来发现数据流传输有点麻烦,后续会使用vuex. 技术栈 vue+vue-router(核心框架) better-scroll(使移动端滑动体验更加流畅) vue-lazyload(用户图片懒加载) nprogress(用于加载过渡) axios(请求) 功能分析与设计 首先我先参考了现有的一

  • Python爬取网易云音乐上评论火爆的歌曲

    Python爬取网易云音乐上评论火爆的歌曲

    前言 网易云音乐这款音乐APP本人比较喜欢,用户量也比较大,而网易云音乐之所以用户众多和它的歌曲评论功能密不可分,很多歌曲的评论非常有意思,其中也不乏很多感人的评论.但是,网易云音乐并没有提供热评排行榜和按评论排序的功能,没关系,本文就使用爬虫给大家爬一爬网易云音乐上那些热评的歌曲. 结果 对过程没有兴趣的童鞋直接看这里啦. 评论数大于五万的歌曲排行榜 首先恭喜一下我最喜欢的歌手(之一)周杰伦的<晴天>成为网易云音乐第一首评论数过百万的歌曲! 通过结果发现目前评论数过十万的歌曲正好十首,通过这

  • Android控件RecyclerView实现混排效果仿网易云音乐

    Android控件RecyclerView实现混排效果仿网易云音乐

    前言 最近在使用网易云音乐的时候,看到如下图的排版效果图,自己也想实现一个 这里采用网上用法最多的方式,而且是比较简单的方式实现的,想要做项目的同学也可以快速入手搞定首页界面,可以在最快的时间内模仿出来,且效果达到90%以上的相似 效果演示 至于图片的加载你们可以根据网上的Api获取相应的图片加载到对应的位置,这里只是采用本地图片来演示 实现分析 这里是采用RecyclerView的GridLayoutManager的一个SpanSize这么一个东西,从下图很容易知道其意思 项目结构 项目结构可

随机推荐