序文
vue cli3で構築されたSPAモバイル端末のWebページには、検索、再生、および曲リスト機能があります。
全体的なUIはNetEase Cloud Musicの公式Webサイトからのものであり、一部のコンポーネントはvuxを使用しています。再生機能は、ネイティブH5を使用して、別のページを作成することなくコンポーネントです。
NetEase Cloud Musicの APIアドレスを クロールし ます。
オンラインプレビュー
- ここをクリックしてプレビューします。PC側でChromeデバッグモードでプレビューし、モバイル側で直接リンクをクリックすることをお勧めします。
- ウェブページ効果のスクリーンショット：
ソースコード分析
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- テクノロジースタック：vuex vue-router vux（UIライブラリ）axios
初心者はvueを学びます、悪いコードがたくさんあるはずです、誰もが軽くスプレーされます。あなたが嫌いでないなら、あなたはスター、emmmm .. githubプロジェクトのアドレスを与えることができ
ます
この記事の複製：Ape 2048 https://www.mk2048.com/blog/blog.php?id=h01cb0jc2ab