Prólogo
La página web del terminal móvil SPA construido con vue cli3 tiene funciones de búsqueda, reproducción y lista de canciones .
La interfaz de usuario general es del sitio web oficial de NetEase Cloud Music, y algunos componentes usan vux. La función de reproducción es un componente sin escribir una página separada, utilizando el H5 nativo.
Rastrear la dirección API de NetEase Cloud Music .
Vista previa en línea
- Haga clic aquí para obtener una vista previa , se recomienda obtener una vista previa en el modo de depuración de Chrome en el lado de la PC, y haga clic en el enlace directamente en el lado móvil.
- Captura de pantalla del efecto de la página web:
Análisis de código fuente
Análisis de directorio 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- Pila de tecnología: axios vuex vue-router vux (biblioteca UI)
El principiante aprende vue, debe haber un montón de código incorrecto, todos ligeramente rociados. Si no le disgusta, puede dar una dirección de proyecto Star, emmmm ..
github
Este artículo se reproduce en: Ape 2048 https://www.mk2048.com/blog/blog.php?id=h01cb0jc2ab