【Vue项目】二、去哪儿网APP——首页开发

重点思想：页面组件化

第一次接触一个完整的Vue项目，从看视频一步一步的做，个人觉得最重要的思想就是，懂得页面组件化这个概念。
将一个页面分成各个部分，例如首页，将它分成头部、轮播图、图标区域、热销推荐区域以及周末去哪儿区域，每个区域都是由一个组件来开发实现。这样实现了页面中每个部分的开发实现自由，以及提高后续对某个部分修改维护的效率。
在一个组件中，分别由三个部分组成，分别是模板template（页面展示代码），数据script（业务实现代码），样式style（页面布局代码）。
本次开发中，使用了stylus这个CSS预处理器。因此最终整个组件的初始化如下：

<template>

</template>

<script>
export default {
   

}
</script>

<style lang="stylus" scoped>

</style>

其中，style中的scoped关键字代表该样式只对当前组件有效，实现局部化样式。

页面组件化下的组件引入及使用

因为一个页面是由多个组件来构成的，则主页面需要引入局部组件，并且使用局部组件。

1. 首先，引入组件：

import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend'

然后在components部分定义局部组件：

components: {
   
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend
  }

2. 接着，在data部分中，返回通过axios获取到的页面数据：

data () {
   
    return {
   
      lastCity: '',
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: []
    }
  }