用 Vue 開發一個音樂 app

vue-music

基於 Vue 包括音樂推薦、搜索、播放、榜單、收藏

歡迎體驗：neveryu.github.io/vue-music/，在手機上效果更好，微信掃碼體驗：

簡介

本項目是基於 vue2.4.1 最新的實戰項目，vue-cli2.9.3 + vue2.4.1 + axios + vue-router3.0.1 + es6 + vux3.0.1 + webpack + better-scroll + 線上真實接口的一個移動端音樂 app。

實現的功能

一、音樂列表、歌單、歌手、排行、榜單、推薦 二、音樂播放、暫停、上一曲、下一曲、喜歡 三、播放列表、添加到播放列表、歷史列表 四、搜索單曲、歌手、專輯、MV 五、查看歌手頁面、專輯頁面、MV 六、熱門搜索 七、搜索歷史記錄 八、排行榜 九、切換播放模式 十、歌詞 十一、我的中心 十二、項目介紹

如今最流行的開發方式就是先後分離了 vue 也是如今最流行的前端框架之一。

截屏演示

移動端演示

掃二維碼在手機上查看效果更好

項目代碼

github.com/Neveryu/vue…

構建

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run local server
npm run prod.server.js
複製代碼

Tip

# 若是 npm install 長時間沒有反應或者安裝失敗，請嘗試
npm install --registry=https://registry.npm.taobao.org
複製代碼

詳細

vue 有本身的腳手架構建工具 vue-cli 。使用起來很是方便，使用 webpack 來集成各類開發便捷工具，好比：

• 代碼熱更新，修改代碼以後網頁無刷新改變，對前端開發來講很是的方便
• Postcss，不再用去管兼容性的問題了，只針對 chrome 寫 css 代碼，會自動編譯生成支持多款瀏覽器的 css 代碼
• ESlint，統一代碼風格
• bable，ES2015 出來已經有一段事件了，可是很多瀏覽器尚未兼容 ES6。有了 bable，放心使用 ES6 語法，它會自動轉義成 ES5 語法
• Stylus，相似於 sass/scss ，可是能夠不寫 { } 和 :，使用起來仍是很方便的
• better-scroll，很好用的移動端各類滾動場景需求的插件（已支持PC）
• vuex，Vuex是一個專爲 Vue.js 應用程序開發的狀態管理模式
• vue-router，專爲 Vue.js 應用程序開發的路由工具

除此以外，vue-cli 已經使用 node 配置了一套本地服務器和安裝命令等，本地運行和打包只須要一個命令就能夠搞定，很是的方便。

爲何寫這個項目

以前的 vue-sell，是一個很是好的 vue 的項目教程了，學了 vue 之後，跟着作一遍 vue-sell，應該對 vue 的基本操做都能很是熟練的掌握了。 可是如何結合 vuex 和 vue-router，以及其餘技術，作一個大型的項目，不少同窗仍是苦於沒有經驗和項目實例，因此就有了這個 vue-music。

vue-music 裏面用到了 vue 全家桶，還有 better-scroll，jsonp 等其餘工具，用的也是線上真實的音樂接口數據，並且項目裏封裝了不少完美的組件，對我的技術的學習和提高有很大的幫助，項目級別上也達到了中大型級別。 很是適合 vue 的進階學習。

獲取教程

這個項目我從頭至尾寫了一遍，解決了項目中遇到的全部問題，因爲有一些包或者模塊升級的緣由，會有一些小的問題，我都已經解決過了。

你能夠加羣聯繫到我，得到這個視頻教程。羣裏面也有不少熱愛技術的小夥伴，你們一塊兒交流學習！！

寫在最後

個人主頁： neveryu.github.io/index.html

QQ羣：685486827