vue移動音樂app開發學習（二）：頁面骨架的開發

本系列文章是為了記錄學習中的知識點，便於后期自己觀看。如果有需要的同學請登錄慕課網，找到Vue 2.0 高級實戰-開發移動端音樂WebApp進行觀看,傳送門。

完成后的頁面狀態以及項目結構如下：

一：頁面入口+header組件的編寫

1:編寫app.vue(src文件夾下):

從完成圖我們可以發現，頁面的骨架分為三塊區域: header(頭部標題)、tab(切換按鈕)、router-view(路由切換的容器)，所以我們將app.vue的代碼改成如下：

<template>
  <div id="app">
    <m-header></m-header>
    <tab></tab>
    <router-view></router-view>
  </div>
</template>

<script>
  import MHeader from 'components/m-header/m-header'
  import Tab from 'components/tab/tab'
  export default {
    components: {
      MHeader,
      Tab
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

</style>

 

這段代碼中，需要注意的是：

       當我們在import一個組件進來的並定義名稱的時候，需要首字母大寫（相當於類名）。導入組件的路徑,如'components/m-header/m-header'中的components需要在build/webpack.base.config.js中加入如下代碼:'components': resolve('src/components')。

2:編寫mian.js(app.vue旁邊那個)

import 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import router from './router'
import fastclick from 'fastclick'
import 'common/stylus/index.styl'

fastclick.attach(document.body)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

這段代碼中，需要注意的是：

       fastclick導入后需要加上fastclick.attach(document.body)才能有作用。瀏覽器從點擊屏幕上的元素到觸發元素的 click 事件，移動瀏覽器會有大約 300 毫秒的等待時間。為什么這么設計呢？ 因為它想看看你是不是要進行雙擊（double tap）操作。這個fastclick就可以解決瀏覽器點擊時300ms的延遲。

　　導入router實例后我們要注冊到vue實例中,這樣我們就可以全局使用了(this.$router)。

二：頁面路由的編寫以及主業務組件的基礎開發：

1、編寫rouert.js:

import Vue from 'vue'
import Router from 'vue-router'
import Recommend from 'components/recommend/recommend'
import Singer from 'components/Singer/Singer'
import Rank from 'components/rank/rank'
import Search from 'components/Search/Search'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/recommend'
    },
    {
      path: '/recommend',
      component: Recommend
    },
    {
      path: '/singer',
      component: Singer
    },
    {
      path: '/rank',
      component: Rank
    },
    {
      path: '/search',
      component: Search
    }
  ]
})

這段代碼中，需要注意的是：

　　默認路由“/”可以分配一個組件。使用路由需要導入vue-rouetr。

2:主業務組件的基礎代碼：

其他的基本代碼請到我的github上下載:傳送門