vue移动音乐app开发学习（二）：页面骨架的开发

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上下载:传送门