Prefácio
A página web do terminal móvel SPA construído com o vue cli3 possui funções de pesquisa, reprodução e lista de músicas .
A interface do usuário geral é do site oficial do NetEase Cloud Music e alguns componentes usam o vux. A função de reprodução é um componente sem escrever uma página separada, usando o H5 nativo.
Rastreie o endereço da API do NetEase Cloud Music .
Visualização online
- Clique aqui para visualizar , é recomendável visualizar no modo de depuração do Chrome no lado do PC e clique no link diretamente no lado móvel.
- Captura de tela do efeito de página da Web:
Análise do código fonte
Análise de diretório Src:
│ 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- Pilha de tecnologia: axios vuex vue-router vux (UI library)
Iniciante aprender vue, deve haver um monte de código ruim, todo mundo levemente pulverizado. Se você não gosta, pode dar um endereço de projeto Star, emmmm ..
github
Este artigo é reproduzido em: Ape 2048 https://www.mk2048.com/blog/blog.php?id=h01cb0jc2ab