Foreword
The web page of SPA mobile terminal built with vue cli3 has search, play, and song list functions .
The overall UI is from NetEase Cloud Music's official website, and some components use vux. The playback function is a component without writing a separate page, using the native H5.
Crawl the api address of NetEase Cloud Music .
online preview
- Click here to preview , it is recommended to preview in chrome debugging mode on the PC side, and click the link directly on the mobile side.
- Webpage effect screenshot:
Source code analysis
Src directory analysis:
│ App.vue
│ main.js
│ router.js
│
├─api
│ common.js //设置请求地址具体url
│ config.js //api配置相关
│
├─assets //静态图片
│ find.svg
│ hot_bg.jpg
│ hot_icon.png
│ play.png
│
├─components
│ │ Player.vue //播放功能
│ │ SearchHot.vue //搜索热词
│ │ Song.vue //歌曲信息
│ │ SongList.vue //歌单信息
│ │
│ ├─Footer //主页的底部UI
│ │ foot.svg
│ │ foot.vue
│ │ footbg.png
│ │
│ ├─Tabs //三大Tab页面,主页/排行榜/搜索
│ │ Home.vue
│ │ Rank.vue
│ │ Search.vue
│ │
│ └─Top //主页的头部UI
│ logo.svg
│ top.vue
│
├─store //vuex
│ actions.js
│ getters.js
│ index.js
│ mutation-types.js
│ mutations.js
│ state.js
│
├─style //css配置
│ foot.css
│ list.css
│ playlist.css
│ song.css
│ top.css
│ words.css
│
└─views //路由配置，两个页面，主布局页面/歌单页面
mainLayOut.vue
PlayList.vue- Technology stack: vuex vue-router vux (UI library) axios
Novice learn vue, there must be a lot of bad code, you light spray. If you don't dislike, you can give a Star, emmmm ..
github project address
This article is reproduced in: Ape 2048 https://www.mk2048.com/blog/blog.php?id=h01cb0jc2ab