一個月寫完vue音樂播放器

前言

我以爲每一段本身努力的時光都須要被本身記錄下來，因此就有了想法記錄我這一個月看視頻的所得。在這個過程當中本身沒有像以前同樣，遇到本身解決不了的問題就逃避。雖說解決一個問題的速度仍是有點慢，大概是本身有點軸，這個方面行不通不知道去換一個方向。

還有就是在這個過程當中，本身體驗到一個比較完整的開發歷程。爲何說是比較完整的項目開發歷程，由於本身沒有經歷切圖畫界面着一塊，本身甚至沒有怎麼去寫UI界面。個人想法是趁着寫着文檔的同時，把寫UI這一塊也過一遍。否則明年走出去，只會寫業務邏輯的前端程序員，什麼玩意嗎。碎碎念念這麼多，接下來就是寫一下本身在這一個月學的一些東西。

若是以爲你看了以爲有點用能夠點個贊，若是你也想跟着視頻學一遍，你能夠點擊這個連接進行學習。放心就算你購買這個課程我也沒啥佣金，只是單純地以爲這個課程很好，課程的價值大於購買的價格。

正文

一.項目總覽

1.技術棧

vue2 + vuex + vue-router + webpack + ES6/7 + better-scroll + stylus

2.關於數據接口

寫在前面有不少接口都須要後端代理,後端代理怎麼作能夠看這篇博客,還有全部接口的使用都是用於學習。雖說接口都給大家貼上去了，可是我仍是但願大家能夠學會爬別人接口。可能後面接口失效了，本身也能夠解決這個問題

A.banner圖API

B.推薦歌單API (rnd的參數是使用Math.random()生成的)

C.歌單詳情API

D.歌手API

E.歌手詳情API (singermid 是從歌手API中返回的數據中獲得的)

F.排行榜API

G.排行榜詳情API (topid是從排行榜API獲得的)

H.搜索API (我直接用老師的線上的API了，不過仍是要作代理)

I. 熱門搜索API

K.歌詞API (pcachetime 是使用 +new Date()生成的)

L.播放地址API (songmid 裏面的參數是歌曲的songmid)

3.說明

開源這個項目沒這個想法，主要是這個項目老師也沒有開源，要尊重老師的勞動成果。

後面會寫一系列關於這個項目的文章，你們若是感興趣能夠能夠關注一下個人簡書

6月份會開始寫一個音頻類的小程序，比較仍是要本身手擼一個項目，面試更加有優點。

4.效果演示

查看demo請戳這裏（請用chrome手機模式預覽） 或者用老師的地址

推薦頁面

歌手頁面

排行頁面

搜索頁面

用戶頁面

6.項目佈局

├── README.md
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js        // alias在這裏配置
│   ├── webpack.dev.conf.js         // favicon能夠在這裏配置
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── index.html                     // 入口html文件
├── package-lock.json
├── package.json
├── prod.server.js
├── src                            // 源碼目錄
│   ├── App.vue
│   ├── api                        // 接口
│   │   ├── config.js              // 公共配置
│   │   ├── rank.js                
│   │   ├── recommend.js
│   │   ├── search.js
│   │   ├── singer.js
│   │   └── song.js
│   ├── base                       // 公共組件
│   │   ├── confirm                // 確認組件
│   │   │   └── confirm.vue
│   │   ├── dialog                 // 彈出組件
│   │   │   ├── dialog.vue
│   │   │   └── vip.png
│   │   ├── listview               // 歌手列表組件
│   │   │   └── listview.vue
│   │   ├── loading                // 加載組件
│   │   │   ├── loading.gif
│   │   │   └── loading.vue
│   │   ├── no-result              // 無結果組件
│   │   │   ├── no-result.vue
│   │   │   ├── no-result@2x.png
│   │   │   └── no-result@3x.png
│   │   ├── progress-bar           // 進度條組件
│   │   │   └── progress-bar.vue
│   │   ├── progress-circle        // 圓形進度條組件
│   │   │   └── progress-circle.vue
│   │   ├── scroll                 // 滾動組件(較核心組件)
│   │   │   └── scroll.vue
│   │   ├── search-box             // 搜索框組件
│   │   │   └── search-box.vue
│   │   ├── search-list            // 用於搜索歷史
│   │   │   └── search-list.vue
│   │   ├── slider                 // 輪播圖組件
│   │   │   └── slider.vue
│   │   ├── song-list              // 歌曲組件(用於music-list組件)
│   │   │   ├── first@2x.png
│   │   │   ├── first@3x.png
│   │   │   ├── second@2x.png
│   │   │   ├── second@3x.png
│   │   │   ├── song-list.vue
│   │   │   ├── third@2x.png
│   │   │   └── third@3x.png
│   │   ├── switches               // 切換組件(user-center組件有用)
│   │   │   └── switches.vue
│   │   └── top-tip                // 頂部提示組件
│   │       └── top-tip.vue
│   ├── common                     // 存放js、stylus、圖片、小圖標
│   │   ├── fonts                  // 小圖標文件存放所在地
│   │   │   ├── music-icon.eot
│   │   │   ├── music-icon.svg
│   │   │   ├── music-icon.ttf
│   │   │   └── music-icon.woff
│   │   ├── image                  // 存放logo和favicon
│   │   │   ├── default.png
│   │   │   └── favicon.ico
│   │   ├── js                     // js庫
│   │   │   ├── cache.js           // 處理localStorage
│   │   │   ├── config.js
│   │   │   ├── dom.js             // 處理dom
│   │   │   ├── jsonp.js           // jsonp的封裝
│   │   │   ├── mixin.js           // mixin
│   │   │   ├── singer.js
│   │   │   ├── song.js
│   │   │   └── utill.js           // 節流函數，生成隨機數
│   │   └── stylus                 // 公共樣式
│   │       ├── base.styl
│   │       ├── icon.styl
│   │       ├── index.styl
│   │       ├── mixin.styl
│   │       ├── reset.styl
│   │       └── variable.styl
│   ├── components                // 組件
│   │   ├── add-song              // 組件
│   │   │   └── add-song.vue
│   │   ├── disc                  // 組件
│   │   │   └── disc.vue
│   │   ├── m-header              // 頭部組件
│   │   │   ├── logo@2x.png
│   │   │   ├── logo@3x.png
│   │   │   └── m-header.vue
│   │   ├── music-list            // 歌曲列表組件(使用比較多)
│   │   │   └── music-list.vue
│   │   ├── player                // 播放組件(核心組件)
│   │   │   └── player.vue
│   │   ├── playlist              // 播放列表組件
│   │   │   └── playlist.vue
│   │   ├── rank                  // 排行組件
│   │   │   └── rank.vue
│   │   ├── recommend             // 推薦組件
│   │   │   └── recommend.vue
│   │   ├── search                // 搜索組件
│   │   │   └── search.vue
│   │   ├── singer                // 歌手組件
│   │   │   └── singer.vue
│   │   ├── singer-detail         // 歌手詳情組件
│   │   │   └── singer-detail.vue
│   │   ├── suggest               // 輸入搜索內容出現的列表
│   │   │   └── suggest.vue
│   │   ├── tab                   // 路由切換組件
│   │   │   └── tab.vue
│   │   ├── top-list              // 排行詳情組件
│   │   │   └── top-list.vue
│   │   └── user-center           // 用戶中心組件
│   │       └── user-center.vue
│   ├── main.js                   // 程序入口文件，加載各類公共組件
│   ├── router
│   │   └── index.js              // 路由配置
│   └── store                     // vuex的狀態管理
│       ├── actions.js            // 配置actions
│       ├── getters.js            // 配置getters
│       ├── index.js              // 引用vuex，建立store
│       ├── mutation-types.js     // 定義常量muations名
│       ├── mutations.js          // 配置mutations 
│       └── state.js              // state狀態
└── static
    └── logo.png
複製代碼

結束語

其實到最後本身也沒有想到本身最後居然把這個項目跟完，之前可能把目標定的過高了。堅持這件事，必定要一個本身能夠完成的目標去執行。打個比分我同窗叫我一個月學完vue，可是個人學習能力不足以學完，這個目標是本身完不成的。那麼你應該換一個目標，好比說一個半月本身能夠學完vue。你本身要看的是本身什麼樣的目標本身能夠完成，而不給本身一個根本完成不了的目標，在這個過程當中你以爲本身完成不了很容易放棄。

放棄很簡單，可是堅持下去很難。還有就是你決定要作的一件事情，不要一遇到困難就放棄。逃避很簡單，解決它則是很勇敢的行爲。你逃避困難的次數越多，你未來就越不可能把這件事情作好。想一想本身爲啥什麼事情都不怎麼作的好，是由於本身從小到遇到難一點事情都扛不下來，因此到了成年，基本上幹啥都不行。(這句話來自馮大)。

將來但願本身能夠直面遇到的困難，菜雞也有雄鷹夢。