前言： 學習慕課網Vue高級實戰課程后，在實踐中總結一些這個項目帶給自己的收獲，希望可以再次鞏固關於Vue開發的知識。這一篇主要梳理：項目概況、項目准備、頁面骨架搭建。項目github地址：https://github.com/66Web/ljq_vue_music，歡迎Star。
| 一、項目概況 |
項目目標： 開發一個媲美原生的移動端音樂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：移動端調試工具，在移動端輸出日志
業務層與支撐層：
 |
 |
| 二、項目准備 |
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'
| 三、頁面骨架開發 |
頁面入口+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個組件：
- rank（排行頁面）
- recommend（推薦頁面）
- search（搜索頁面）
- 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>
注：項目來自慕課網