【音樂App】—— Vue-music 項目學習筆記：項目準備

前言： 學習慕課網Vue高級實戰課程後，在實踐中總結一些這個項目帶給本身的收穫，但願能夠再次鞏固關於Vue開發的知識。這一篇主要梳理：項目概況、項目準備、頁面骨架搭建。項目github地址：https://github.com/66Web/ljq_vue_music，歡迎Star。

---

1、項目概況

 

       項目目標： 開發一個媲美原生的移動端音樂App

主頁面	用戶我的中心
播放器	播放列表

 

      前端技術棧： 

• Vue：用於構建用戶界面的 MVVM 框架。它的核心是響應的數據綁定和組系統件
• vue-router：爲單頁面應用提供的路由系統，項目上線前使用了 Lazy Loading Routes 技術來實現異步加載優化性能
• vuex：Vue 集中狀態管理，在多個組件共享某些狀態時很是便捷
• vue-lazyload：第三方圖片懶加載庫，優化頁面加載速度
• better-scroll：iscroll 的優化版，使移動端滑動體驗更加流暢
• stylus：css 預編譯處理器
• ES6：ECMAScript 新一代語法，模塊化、解構賦值、Promise、Class 等方法很是好用

      後端技術棧：

• Node.js：利用 Express 起一個本地測試服務器
• jsonp：服務端通信。抓取 QQ音樂(移動端)數據
• axios：服務端通信。結合 Node.js 代理後端請求，抓取 QQ音樂(PC端)數據

      自動化構建及其餘工具：

• webpack：項目的編譯打包
• vue-cli：Vue 腳手架工具，快速搭建項目
• eslint：代碼風格檢查工具，規範代碼格式
• vConsole：移動端調試工具，在移動端輸出日誌

       業務層與支撐層：

 

2、項目準備

 

       vue-cli安裝

(sudo) npm install -g vue-cli // sudo:mac環境下有關管理權限的命令 vue init webpack vue-music 

　   項目目錄介紹及圖標字體、公共樣式等資源準備

• api目錄 ： 和後端請求相關的代碼，包括ajax和jsonp的請求
• common目錄 ： fonts/image/js/stylus
• components目錄 ： 業務組件
• base目錄 ： 基礎組件
• router目錄 ： 路由相關文件
• store目錄 ： 存放vuex相關的代碼

       樣式文件

• base.styl ： 一些基礎的樣式，而且引用variable.styl
• variable.styl ： 顏色定義規範、字體定義規範（組件要使用時引用）
• icon.styl ： 製做字體文件後要使用的樣式
• reset.styl ： 重置樣式
• mixin.styl ： 定義一些樣式函數（組件要使用時引用）
• index.styl ： 引入 reset/base/icon.styl

       安裝stylus stylus-loader

npm install stylus stylus-loader --save

       main.js入口文件中引入

import './common/stylus/index.styl'

 

3、頁面骨架開發

 

       頁面入口+header組件編寫

• index.html 添加<meta>標籤 ： 移動端常見的基本設置

  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

• 安裝依賴：

  //babel-runtime —— 對es6語法作一些轉義 //fastclick —— 解決移動端點擊延遲300ms的問題 //babel-polyfill —— 【補丁】 對es6中promise等API的轉義 npm install babel-runtime fastclick babel-polyfill --save

• 在 main.js 中引入: 

  //babel-polyfill 必定要寫在最前面 import ‘babel-polyfill’ import fastclick from 'fastclick' //fastclick推薦用法：使document.body下面全部的點擊都沒有300ms的延遲 fastclick.attach(document.body)

• 刪掉 Helloword.vue , 修改router->index.js 中的配置,刪掉 Helloword 相關
• 建立 m-header.vue 組件，坑：<style>中不能使用@表明src目錄，會報錯，仍是使用../
• 在 App.vue 中刪掉Logo，修改樣式，引入variable.styl,註冊MHeader組件

       路由配置+頂部導航欄組件開發

• 4個路由，對應要建立4個組件：

1. rank（排行頁面）
2. recommend（推薦頁面）
3. search（搜索頁面）
4. singer（歌手頁面）

• 在router->index.js中引入，並配置路由routes：

  import Recommend from '@/components/recommend/recommend' import Singer from '@/components/singer/singer' import Rank from '@/components/rank/rank' import Search from '@/components/search/search' routes: [ { path: '/', redirect: '/recommend' //默認頁面重定向到recommend路由中  }, { path: '/recommend', component: Recommend }, { path: '/rank', component: Rank }, { path: '/search', component: Search }, { path: '/singer', component: Singer } ]

• App.vue 中使用<router-view></router-view>
• 建立 tab.vue 導航欄組件，經過<router-link>切換路由

  <router-link tag="div" class="tab-item" to="/recommend"> <span class="tab-link">推薦</span> </router-link> <router-link tag="div" class="tab-item" to="/singer"> <span class="tab-link">歌手</span> </router-link> <router-link tag="div" class="tab-item" to="/rank"> <span class="tab-link">排行</span> </router-link> <router-link tag="div" class="tab-item" to="/search"> <span class="tab-link">搜索</span> </router-link>

• 設置點擊高亮樣式：&.router-link-active
• App.vue 中引入並註冊tab.vue，使用<tab></tab>

---

注：項目來自慕課網