vue实现网易云音乐纯界面

 更新时间:2022年07月09日 16:18:47   作者:Cloudmoon  
这篇文章主要为大家介绍了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 网易云音乐界面的资料请关注脚本之家其它相关文章!

相关文章

  • vue中v-if失效原因及解决方法

    vue中v-if失效原因及解决方法

    本文主要介绍了vue中v-if失效原因及解决方法,一般v-if失效都是和绑定变量有关,下面就来具体介绍一下,感兴趣的可以了解一下
    2023-09-09
  • Vue.js中v-model指令的用法介绍

    Vue.js中v-model指令的用法介绍

    这篇文章介绍了Vue.js中v-model指令的用法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • vue.js 实现点击按钮动态添加li的方法

    vue.js 实现点击按钮动态添加li的方法

    今天小编就为大家分享一篇vue.js 实现点击按钮动态添加li的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue.js 2.0中select级联下拉框实例

    Vue.js 2.0中select级联下拉框实例

    在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用,需要的朋友可以参考下
    2017-03-03
  • 移动端底部导航固定配合vue-router实现组件切换功能

    移动端底部导航固定配合vue-router实现组件切换功能

    经常遇到这样的需求,移动端中的导航并不是在顶部也不是在底部,而是在最底部且是固定的,当我们点击该导航项时会切换到对应的组件。这篇文章主要介绍了移动端底部导航固定配合vue-router实现组件切换功能,需要的朋友可以参考下
    2019-06-06
  • vite打包出现"default" is not exported by "node_modules/...问题解决

    vite打包出现"default" is not exported by "no

    这篇文章主要给大家介绍了关于vite打包出现"default" is not exported by "node_modules/...问题解决的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • vue中的计算属性和侦听属性

    vue中的计算属性和侦听属性

    这篇文章主要介绍了vue中的计算属性和侦听属性,帮助大家更好的理解和学习vue框架的使用,感兴趣的朋友可以了解下
    2020-11-11
  • Vue.directive使用注意(小结)

    Vue.directive使用注意(小结)

    这篇文章主要介绍了Vue.directive使用注意(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue指令指令大全

    Vue指令指令大全

    本文为大家介绍了VUE中内置指令包括:v-text,v-html,v-show,v-if,v-else,v-else-if,v-for,v-on,v-bind,v-model,v-pre,v-cloak,v-once
    2019-02-02
  • vue 弹出框 引入另一个vue页面的示例代码

    vue 弹出框 引入另一个vue页面的示例代码

    这篇文章主要介绍了vue 弹出框引入另一个vue页面,这种方式适用于在一个页面逻辑比较多的时候,可以搞多个页面,防止出错,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-08-08

最新评论