1.在App.vue頁面寫需要的元件

<template>
	<div id="app"><!--這個到時候會替換掉index.html的#app的DOM元素-->
		<m-header></m-header>
		<tab></tab>
		<router-view></router-view>
	</div>
</template>

<script type="text/ecmascript-6">
import MHeader from './components/m-header/m-header'
import Tab from './components/tab/tab'
export default {
	components: {
		MHeader,
		Tab
	}
}
</script>

<style scoped lang="stylus">

</style>
 

並在‘src’->‘components’資料夾新建對應的 元件 資料夾

再在‘common’資料夾放入自己專案的公共樣式，字型，圖片等

2.編寫"m-header.vue"頁面，即"m-header"元件

<template>
	<div class="m-header">
		<div class="icon"></div>
		<h1 class="text">Apple Music</h1>
		<router-link class="mine">
			<i class="icon-mine"></i>
		
 
</router-link>
	</div>
</template>


<script>
	export default {}
</script>


<style scoped lang="stylus">
  @import "~common/stylus/variable";
  @import "~common/stylus/mixin"
</style>

3.在‘components’裡新建檔案，實現tab點選後對應顯示的元件模組，如下

4.編寫‘tab’欄，在‘tab.vue’頁面編寫

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

<script type="text/ecmascript-6">
export default {

}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
</style>

4.再配置路由，路由配置的頁面寫在'router'=>index.js頁面

在main.js頁面引入“router”裡面的index.js頁面，引入路徑只寫到‘./router’會預設為引入‘router’檔案裡的index.js頁面，再在new Vue寫router

“router”=>index.js寫法如下：

import Vue from 'vue'
import VueRouter 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(VueRouter)
export default new VueRouter({
  routes:[
    {
      path:'/',
      redirect:"/recommend"	//預設重定向為recommend點選狀態
    },{
      path:"/recommend",
      component:Recommend
    },{
      path:"/singer",
      component:Singer
    },{
      path:"/rank",
      component:Rank
    },{
      path:"/search",
      component:Search
    }
  ]
})