趁着疫情期間不上班，在 Github上找了幾個開源 VUE 項目，親自實踐了一下，學習到了不少 VUE 以及 CSS 前端布局的技巧，這次的小項目是用 VUE 實現一款音樂播放器。
Github 地址：
https://github.com/Sioxas/vue-music/
感興趣的朋友可以下載源碼，我會和大家一起研究項目里每個組件的關鍵知識點，並把重要內容整理出來，相互參考。建議想學的朋友，親自動手實踐一下，從頭開始，每個組件寫一寫，做成了之后，把鏈接放在自己的博客上，或者公眾號上，用戶可以搜索自己想聽的音樂、試聽各大音樂排行榜，也可以根據自己的需要添加一些個性的內容，還是很炫酷的。
先來幾張項目截圖：
項目目錄：
我們 一起來看看這個項目用到的技術棧：
1. Vue
毫無疑問用的最多的就是 Vue 的語法，教程在 Vue 的官網可以找到，主要用到的有條件渲染、列表渲染、組件基礎、過渡&動畫。 Vue 的教程寫的很好，通俗易懂，並且每節都有很好的小demo。
2. Vue-CLI
主要用於初始化項目標准目錄，用它可以生成統一的項目目錄，方便管理。注：新版本的 CLI 省掉了 build 文件夾，若你想自定義項目端口、是否開啟 ESLint 語法提醒（新手建議開啟，有助於學習標准的語法，等遇到一些莫名的‘坑’時可以再關閉）等需要在項目根目錄下，新建 vue.config.js 文件：
const path = require('path'); function resolve (dir) { return path.join(__dirname, dir) } module.exports = { chainWebpack: config => { //路徑配置 config.resolve.alias .set('assets', resolve('src/assets')) .set('styles', resolve('src/assets/styles')) }, lintOnSave: false, //false:關閉ESLint // webpack-dev-server 相關配置 devServer: { // 調試端口 // port: 8989 } //其他配置.... }
3. Vue-Router
4. Vuex
查閱官網教程，教程很詳細易懂，主要用於狀態管理，可以簡單理解為對全局變量的管理，很有用。
5. QMplayer
采用QQ音樂的web播放器，開發文檔：https://xingqiao.gitbooks.io/qmplayer/content/kuai-su-shang-shou.html
如何將其引入到vue項目里呢，很簡單，找到項目根目錄下：public\index.html文件（老版本vue-cli生成的項目，index.html直接位於項目根目錄），將<head></head>內替換為：
<meta charset="utf-8"> <title>vue-music</title> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"> <script src="//y.gtimg.cn/music/h5/player/player.js?max_age=2592000"></script> //引入QMplayer
我們能在index.html中看到id為app的div，其實就是和App.vue對應，App.vue里面的標簽將會把路由相關內容（index.js）渲染在這個地方，總之index.html是項目運行的入口。
項目加載的過程是index.tml->main.js->app.vue->index.js->單頁面（XXX.vue）
6. vue-resource
vue 的類似於ajax功能插件，項目中用於同 QQmusic 接口發送返回數據。
在 main.js 中引入：
import VueResource from 'vue-resource' Vue.use(VueResource)
7. vue-lazyload
項目中主要用於設置加載狀態圖片、error圖片、默認圖片。
在 main.js 中引入：
import VueLazyLoad from 'vue-lazyload' Vue.use(VueLazyLoad, { loading: require('./assets/loading.svg'), error: require('./assets/error.svg'), attempt: 1 })
在組件中，加載圖片時：
<img v-lazy="...">
8. vue-awesome-swiper 3.1.3
經典滾動插件，用於處理播放器主頁，“排行榜”和“推薦”的頁面滑動效果。
import { swiper, swiperSlide } from "vue-awesome-swiper"; //在組件中引入即可
組件中使用：
<swiper-slide>排行榜</swiper-slide> <swiper-slide>推薦</swiper-slide> <div class="swiper-pagination" solt="pagination"></div> //分頁器的小圓點
9.rxjs
安裝：
npm install rxjs
npm install rxjs-compat //安裝rxjs依賴
兩大核心 Observable 和 Subject ，簡單理解為對各種事件的監聽（Dom事件、值改變事件等），其中 Observable 的 opreator 種類較多，該項目只用到 Subject，推薦下面的播客學習了解。
推薦播客：https://www.jianshu.com/p/4ad42e46a797
10.weui 2.3.0
微信團隊開發的前端css插件，項目用主要用於點擊按鈕的 ActionSheet 實現。
在 main.js 中引用：
import 'weui';
在正式編碼前，請把所需的插件安裝完畢。
下一節，我們講解分析播放器主頁的 排行榜頁面實現。