VUE練手項目實現音樂播放器(一)-------準備階段

時間 2020-07-10

標籤 vue 項目實現音樂播放準備階段简体版

原文原文鏈接

趁着疫情期間不上班，在 Github上找了幾個開源 VUE 項目，親自實踐了一下，學習到了很多 VUE 以及 CSS 前端佈局的技巧，此次的小項目是用 VUE 實現一款音樂播放器。css

Github 地址：html

感興趣的朋友能夠下載源碼，我會和你們一塊兒研究項目裏每一個組件的關鍵知識點，並把重要內容整理出來，相互參考。建議想學的朋友，親自動手實踐一下，從頭開始，每一個組件寫一寫，作成了以後，把連接放在本身的博客上，或者公衆號上，用戶能夠搜索本身想聽的音樂、試聽各大音樂排行榜，也能夠根據本身的須要添加一些個性的內容，仍是很炫酷的。vue

先來幾張項目截圖：webpack

項目目錄：git

咱們一塊兒來看看這個項目用到的技術棧：github

1. Vue web

毫無疑問用的最多的就是 Vue 的語法，教程在 Vue 的官網能夠找到，主要用到的有條件渲染、列表渲染、組件基礎、過渡&動畫。 Vue 的教程寫的很好，通俗易懂，而且每節都有很好的小demo。ajax

2. Vue-CLI 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';

在正式編碼前，請把所需的插件安裝完畢。

下一節，咱們講解分析播放器主頁的排行榜頁面實現。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。