github:https://github.com/Ching-Lee/vue-music
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值发生变化
