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

Z时代
2024-01-10
分类：综合

vue

本系列文章是为了记录学习中的知识点，便于后期自己观看。如果有需要的同学请登录慕课网，找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门。

完成后的页面状态以及项目结构如下：

一：页面入口+header组件的编写

1:编写app.vue(src文件夹下):

从完成图我们可以发现，页面的骨架分为三块区域: header(头部标题)、tab(切换按钮)、router-view(路由切换的容器)，所以我们将app.vue的代码改成如下：

<template>
  <div >
    <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
    }
  ]
})