1.创建项目

1.1 参考01节完成node.js及vue脚本架开发环境的基本配置

1.2 进入到创建项目的目录下，使用vue-cli创建vue-music项目

选择Runtime-only

选择Standard

安装完成，执行命令可以run起来

1.2 安装一些需要的包

在package.json中dependencies会看到多了新安装的两个包

babel-runtime:对ES6的语法进行转义
fastclick：解决移动端300ms点击延迟的问题

babel-polyfill:能够对ES6的API进行转义。
在main.js中import

import 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import router from './router'
import fastclick from 'fastclick'
fastclick.attach(document.body)

2.页面框架搭建

2.1 Header组件

每个页面都有头部组件，导航栏组件，以及内容区组件，由于内容区组件根据router的不同，会加载不同的组件，所以使用vue-router。
整个App.vue如下，首先添加main_header组件

<template>
  <div id="app">
    <main_header/>
  </div>
</template>

<script type="text/ecmascript-6">
import MHeader from './components/m_header/m_header.vue'

export default {
  components: {
    'main_header': MHeader
  }
}
</script>

<style>
  @import "./assets/css/reset-min.css";
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

实现main_header组件

main_header组件实现效果

由两个div组成，设置宽和高，同时设置背景图片，由于对于块元素设置宽还是占一行，所以我们需要display:inline-block。

vertical-align 属性设置元素的垂直对齐方式。
top：把元素的顶端与行中最高元素的顶端对齐
text-align规定元素中的文本的水平对齐方式。

<template>
  <div class="m_header">
    <div class="icon"></div>
    <h1 class="text">High Music</h1>
  </div>
</template>

<script>
export default {
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .m_header {
    height: 44px;
    color: white;
    background-color: orange;
    text-align: center;
  }
  .icon{
    display: inline-block;
    width:30px;
    height:32px;
    margin-top: 6px;
    margin-right: 9px;
    background-image: url("../../assets/images/music_logo.png");
    background-size: 30px 32px;
    vertical-align: top;
  }
  .text{
    display: inline-block;
    line-height: 44px;
    font-size: 16px;
    vertical-align: top;
  }

</style>

2.2. 配置路由

首先创建几个空组件，包括推荐组件，歌手组件，排行组件，搜索组件供之后使用。

之后在router/index.js中进行路由配置

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

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

2.3 实现导航栏组件

这里使用currentIndex属性存储被点击的tag，从而显示选中tag的下划线。

<template>
  <nav class="tag">
   <router-link tag="div" to="/recommend" class="tag-item" >
     <span class="tag-link" v-on:click="selectTag(0)" v-bind:class="{tag_active:currentIndex===0}">推荐</span>
   </router-link>
    <router-link tag="div" to="/singer" class="tag-item" >
      <span class="tag-link" v-on:click="selectTag(1)" v-bind:class="{tag_active:currentIndex===1}">歌手</span>
    </router-link>
    <router-link tag="div" to="/rank" class="tag-item" >
      <span class="tag-link" v-on:click="selectTag(2)" v-bind:class="{tag_active:currentIndex===2}">排行</span>
    </router-link>
    <router-link tag="div" to="/search" class="tag-item" >
      <span class="tag-link" v-on:click="selectTag(3)" v-bind:class="{tag_active:currentIndex===3}">搜索</span>
    </router-link>
  </nav>

</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      currentIndex: 0
    }
  },
  methods: {
    selectTag (index) {
      this.currentIndex = index
    }
  }
}
</script>

<style>
  .tag{
    padding-top: 5px;
    padding-bottom: 5px;
    height:40px;
    background-color: orange;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .tag-item{
    width:32px;
    height:25px;
    line-height: 25px;
    text-align: center;
    box-sizing: border-box;
  }
  .tag_active {
    border-bottom: white 2px solid;
  }
  .tag-link{
    font-size: 15px;
    color: whitesmoke;
    padding-bottom: 5px;
  }

</style>

2.4 在App.vue中添加导航组件和路由组件

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

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

hash值发生变化