03.vue.2.X开发音乐App--框架搭建

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组件

实现main_header组件

main_header组件实现效果

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

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

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的下划线。

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

hash值发生变化