基於vue2 + vue-router + vuex 構建的一個音樂類單頁面應用 —— echo回聲

小鑫本尊發表於2017-11-23
Vue

vue2-echo

前言

這半年多一直用Vue寫專案，感覺用的挺得心應手，所以準備分享一些經驗和記錄成果。我上網搜了Vue的練手專案和視訊教程，目前大多數都是音樂、購物車，後臺管理那方面，可能因為這方面需求比較多吧。考慮之後打算從容易 -> 中等 -> 困難， 3個複雜度和不同型別的專案，一步步地帶領大家深入Vue。這3個階段的專案將會涉及Vue的大部分知識，如果你都能掌握，那麼你就可以隨心所欲地使用Vue去寫單頁面應用了。

此開源系列全部都是線上實踐，並不像一些視訊教程裡面能實現差不多樣子且沒有考慮細節、相容和使用體驗的問題。一般作為上線專案，都會遇到一些極其不可理喻的需求且存在著許多麻煩的細節。往往這些才是我們最煩的，網上很多也搜尋不到，又要自己去分析、實踐，才能運用到自己專案上，這裡會浪費大量大量的時間，所以在專案裡我會盡可能註釋大量的提示去幫助大家解決這些問題：都是我線上上專案實踐過的一些經驗，供大家參考。

技術棧

vue2、vuex3、vue-router3、vue-awesome-swiper、vue-progressbar

axios、muse-ui、mockjs、flexible.js、Material Icons

ES6/7、stylus、eslint、webpack3、

說明

如果對您有幫助，您可以點右上角 "Star"一下， 您的支援是我最大的動力！非常感謝！^_^ ?

或者您可以 "follow" 一下，我會不斷開源更多的有趣實用的專案

開發環境 macOS 10.12.6、Chrome 61、 nodejs 8.4.0

如有問題請直接在 Issues 中提，或者您發現問題並有非常好的解決方案，歡迎 PR ?

該專案是此開源系列的其中一個階段，更多內容檢視下方的最終目標

最終目標

注：此係列只關注前端專案的實現，後端等知識不是此係列的範圍，但會告知一二。

注意

1、因為vue-router使用 hitstory 模式並且該專案沒有後端支援，所以線上專案重新整理之後是會出現404的，這裡是需要後端配置一下的。在開發環境下不會出現這種問題，建議下載專案執行檢視最佳效果。具體解釋在router裡面或者檢視 vue-router官網的解釋

2、該專案是純前端專案，資料是使用mock模擬的，資料結構跟官方保持一致，只是沒有了一些其他功能的資料，類似評論等。

3、手機檢視專案有些瀏覽器不支援自動播放音樂的，需要手動觸發。

效果演示

檢視deme請戳這裡（請使用chrome手機模式預覽）

移動端掃描下方二維碼

基於vue2 + vue-router + vuex 構建的一個音樂類單頁面應用 —— echo回聲

功能

  • [x] 全站內播放（單頁面優點）
  • [x] 播放 & 暫停 & 下一首
  • [x] 播放模式： 預設、隨機播放、單曲迴圈、列表迴圈
  • [x] 播放進度條 & 可調節播放進度
  • [x] 播放列表 & 可刪除播放列表 & 可點選切換音樂
  • [x] 一鍵播放
  • [ ] 彈幕 （太耗移動web效能和個人時間，暫不實現啦）
  • [ ] 手機鈴聲（好像只有app獲取使用者手機許可權才能實現，web暫不可能實現，如果可以實現請告知我）

專案截圖

基於vue2 + vue-router + vuex 構建的一個音樂類單頁面應用 —— echo回聲 基於vue2 + vue-router + vuex 構建的一個音樂類單頁面應用 —— echo回聲

基於vue2 + vue-router + vuex 構建的一個音樂類單頁面應用 —— echo回聲 基於vue2 + vue-router + vuex 構建的一個音樂類單頁面應用 —— echo回聲

基於vue2 + vue-router + vuex 構建的一個音樂類單頁面應用 —— echo回聲 基於vue2 + vue-router + vuex 構建的一個音樂類單頁面應用 —— echo回聲

目錄結構

├── build                        // 構建相關  
├── config                       // 配置相關
├── src                          // 原始碼
│   ├── assets                   // 樣式、圖示等靜態資源
│   ├── components               // 全域性公用元件
│   |   ├── banner.vue           // banner元件
│   |   ├── error.vue            // 錯誤元件
│   |   ├── list.vue             // 列表元件
│   |   ├── loading.vue          // 載入元件
│   |   ├── musicBar.vue         // 音樂條元件
│   |   ├── sheet.vue            // 模態框元件
│   ├── config                   // 全域性公用方法
│   |   ├── cache.js             // 快取方法
│   |   ├── fetch.js             // 請求方法
│   |   ├── util.js              //  工具方法
│   ├── mock                     // mock資料
│   ├── page                   
│   |   ├── detail               //  詳情頁
│   |   ├── index                //  首頁
│   ├── router                   // 路由
│   ├── store                    // 狀態管理
│   ├── App.vue                  // 入口頁面
│   └── main.js                  // 入口 載入元件 初始化等
├── static                       // 空資料夾，只作為github保留
├── .babelrc                     // babel-loader 配置
├── eslintrc.js                  // eslint 配置項
├── .gitignore                   // git 忽略項
├── index.html                   // html模板
└── package.json                 // package.json複製程式碼

安裝執行

# install dependencies
npm install

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

# build for production with minification
npm run build

本專案沒有依賴JQuery，如需要使用JQuery，開啟build目錄的webpack.dev.conf.js 和 webpack.prod.conf.js 裡面的JQuery程式碼，並npm install jquery -save複製程式碼

交流

歡迎熱愛學習、忠於分享的朋友一起來交流

  • QQ：771674109
  • WX：L771674109
  • vue交流群：338241465

License

MIT

Copyright (c) 2017-present，uncleLian

相關文章