Vue实战项目开发--首页开发

左手的ㄟ右手 2022-05-12 16:08 271阅读 0赞

## 首页开发 ##

注意：项目的图片资源都是去哪儿网站的在线图片([图片来源网站][Link 1]),只可以用来练习哦，小心侵权

### 1. 首页header区域开发 ###

![70][]

在home目录下新建一个components文件夹，然后把首页home拆分成不同的组件放在components文件夹下，最后通过在home.vue中引用对应的组件就可以了

主要编写的代码有Home.vue和Header.vue

home.vue:

<template>
    <div>
      <home-header></home-header>
    </div>
    </template>
    <script>
    import HomeHeader from './components/Header'
    export default {
      name: 'Home',
      components:{
        HomeHeader
      },
      data () {
        return {
          
        }
      },
      computed: {},
      created () {},
      methods: {}
    }
    </script>
    <style lang="less" scoped></style>

Header.vue

<template>
      <div class="header">
        <div class="header-left">返回</div>
        <div class="header-input">输入城市/经典/游玩主题</div>
        <div class="header-right">城市</div>
      </div>
    </template>
    <script>
    export default {
      name: 'HomeHeader',
      data () {
        return {
          
        }
      },
      computed: {},
      created () {},
      methods: {}
    }
    </script>
    <style lang="stylus" scoped>
      .header
        display: flex
        line-height: .86rem
        background: #00bcd4
        color: #fff
        .header-left
          width: .64rem 
          float: left
        .header-input
          flex: 1
          height: .64rem
          line-height .64rem
          margin-left: .2rem 
          margin-top: .12rem
          background: #ffffff
          border-radius: .1rem
          color: #ccc
        .header-right
          width: 1.24rem
          float: right
          text-align : center
    </style>

Header.vue的样式使用stylus预处理框架来写的css样式，需要安装依赖

npm install stylus stylus-loader --save

### iconfont的使用和代码的优化 ###

在[iconfont][]网站注册登录后，并创建自己的项目的图标库后，把你需要的图标加入到这个项目中

![70 1][]

下载到本地后，在项目的assets/styles中新建一个iconfont文件夹，然后把刚才下载的文件解压，把里面这几个文件  iconfont.eot、iconfont.svg、iconfont.ttf和iconfont.woff放到新建的iconfont文件夹中，把iconfont.css放到assets/styles路径下，并修改iconfont.css的对前面四个文件的引用（因为前面四个文件的路径变化了）：

@font-face {font-family: "iconfont";
      src: url('./iconfont/iconfont.eot?t=1540351455180'); /* IE9*/
      src: url('./iconfont/iconfont.eot?t=1540351455180#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAS4AAsAAAAABywAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8mkksY21hcAAAAYAAAABgAAABnLTOHs9nbHlmAAAB4AAAANIAAADsyjr7HGhlYWQAAAK0AAAALwAAADYTC1G+aGhlYQAAAuQAAAAcAAAAJAfeA4VobXR4AAADAAAAAA4AAAAQEAAAAGxvY2EAAAMQAAAACgAAAAoAngBobWF4cAAAAxwAAAAfAAAAIAERADBuYW1lAAADPAAAAUUAAAJtPlT+fXBvc3QAAASEAAAAMgAAAEOSzck0eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeqTw3Z27438AQw9zM0AAUZgTJAQDkYwxCeJztkMENgEAIBAdRczGW4dOXMV4/vqz8rgwFzodFuGQIbAiPBQZAjdXoQS4E12muhK9M4fcctierDspStprv+zuFJC5STJ1/lpFfc/T93dRTa3jGZWt4rjU30AfLSRNieJxjYGRg+N/A9IO5mUGIgYGTkU1EnFHMyMxEnVHNxJzRTI+R6dg/F3EJxn0cYgIc/5w42Bn3cnPIM5f/s5F0kPznziEoysG4k0OMk/Ewtzw7AxAwA83bz1zK7MDAzSDOoMzAoKrHqG7HaC7HKM4HZgC5fIzscoysanaMYvKMYnyMauqMt9a+YGF5sXYdiFw38SALy8GJE0AkYy8Xs6gshyOY5AHKwdQ5wFRMmHjQiltGgJHLH0wyMIIcwcLA1MDABLSbUZEJSP9haAByGADaMDL4AAB4nGNgZGBgAOLOzkOi8fw2Xxm4WRhA4Po3tvsI+n8DCwNzM5DLwcAEEgUAO60LEQB4nGNgZGBgbvjfwBDDwgACQJKRARWwAABHCgJteJxjYWBgYEHCAACwABEAAAAAAAAAKABoAHYAAHicY2BkYGBgYVBhYGYAASYg5gJCBob/YD4DAAx/AUIAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAhZGJkZmRhZGVgS0tMS+jNJOtOL+0uDSfPSszMa8kv5SBAQBvVQhZAAA=') format('woff'),
      url('./iconfont/iconfont.ttf?t=1540351455180') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
      url('./iconfont/iconfont.svg?t=1540351455180#iconfont') format('svg'); /* iOS 4.1- */
    }
    
    .iconfont {
      font-family:"iconfont" !important;
      font-size:16px;
      font-style:normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

注意：这里有三种使用图标的样式，你可以看下载的文件里三种不同的引入方式，点击打开就可以查看了（特别重要）![70 2][]

不同的引用方式，复制不同的代码

![70 3][]

然后在main.js中引入就可以使用了

import './assets/styles/iconfont.css'

使用：

代码优化：在build的webpack.base.conf.js中这样增加这段代码

![70 4][]

然后在main.js和Header.vue中就可以修改引入方式（注意：）

main.js：

import 'styles/reset.css'
    import 'styles/border.css'
    import 'styles/iconfont.css'

Header.vue：这里是styuls的css预处理设置的css

@import '~styles/varibles.styl'

varibles.styl：

$bgColor = #00bcd4

然后就可以在Header.vue中使用：

@import '~styles/varibles.styl'
      .header
        display flex
        line-height .86rem
        background $bgColor
        color #fff

### 首页轮播图 ###

因为新加一个功能，然后就可以在GitHub上创建一个index-swiper分支，可以参考这个博客（[GitHub--创建新的分支(转)][GitHub--]）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_27_color_FFFFFF_t_70][]

使用轮播图需要安装一个插件（插件地址：[vue-awesome-awiper][]）：

npm install vue-awesome-swiper@2.6.7 --save

然后就是引入这个这个插件，分别可以全局引入和局部引入（具体的操作就看上面的插件地址中有说明）

全局引入：

import Vue from 'vue'
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    
    // require styles
    import 'swiper/dist/css/swiper.css'
    
    Vue.use(VueAwesomeSwiper, /* { default global options } */)

局部引入：

import 'swiper/dist/css/swiper.css'
    
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    
    export default {
      components: {
        swiper,
        swiperSlide
      }
    }

Swiper.vue：

<template>
        <div class="wrapper">
            <swiper :options="swiperOption" >
                <swiper-slide v-for="item of swiperList" :key="item.id">
                    <img class="swiper-img" :src="item.imgUrl" alt="">
                </swiper-slide>
                <div class="swiper-pagination"  slot="pagination"></div>
            </swiper>
        </div> 
    </template>
    <script>
    export default {
        name:'HomeSwiper',
        data () {
            return {
                swiperOption:{
                    pagination: '.swiper-pagination',
                    loop: true
                },
                swiperList: [
                    {
                        id: '0001',
                        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1810/e0/c99056cd01148902.jpg_750x200_8b93d0b5.jpg'
                    },
                    {
                        id: '0002',
                        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1808/7e/19b06067afac3402.jpg_750x200_f613313a.jpg'
                    },
                    {
                        id: '0003',
                        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1809/2d/0d7dc3400a50b502.jpg_750x200_4ca95dd4.jpg'
                    }
                ]
            }
        }
    }
    </script>
    <style lang="stylus" scoped>
        .wrapper >>> .swiper-pagination-bullet-active
            background #ffffff
        .wrapper
            width 100%
            height 0
            overflow hidden
            padding-bottom 26.66%
            background #eeeeee
            // height 31.25vw (浏览器有差异，不建议)
            .swiper-img
                width 100% 
    </style>

Home.vue(改变):

<template>
    <div>
      <home-header></home-header>
      <home-swiper></home-swiper>
    </div>
    </template>
    <script>
    import HomeHeader from './components/Header'
    import HomeSwiper from './components/Swiper'
    export default {
      name: 'Home',
      components:{
        HomeHeader,
        HomeSwiper
      },
      data () {
        return {
          
        }
      },
      computed: {},
      created () {},
      methods: {}
    }
    </script>
    <style lang="less" scoped></style>

如果你是分支上进行这部分的代码的开发，则需要执行以下操作：

git add .
    git commit -m '这里写这次提交的说明' 
    git push <- 上传index-swiper分支上->
     
    git checkout master <- 切换回主分支->
    git merge index-swiper <- 将index-swiper分支合并到主分支上->

### 图标区域页面布局 ###

这里我们新建了一个分支index-icons，用于icons图标区域的功能实现，这里主要看代码就可以了

<template>
      <div class="icons">
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="">
          </div>
          <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="">
          </div>
          <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="">
          </div>
          <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="">
          </div>
          <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="">
          </div>
          <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="">
          </div>
          <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="">
          </div>
          <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="">
          </div>
          <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="">
          </div>
          <p class="icon-desc">热门景点</p>
        </div>
      </div>
    </template>
    <script>
    export default {
      name: 'HomeIcons'
    }
    </script>
    <style lang="stylus" scoped>
      @import '~styles/varibles.styl';
      .icons
        width 100%
        overflow hidden
        height 0
        padding-bottom 50%
        .icon
          position relative
          overflow hidden
          float left
          width 25%
          height 0
          padding-bottom 25%
          .icon-img
            position absolute
            top 0
            left 0
            right 0
            bottom .44rem
            box-sizing border-box
            padding .1rem
            .icon-img-content 
              display block
              margin 0 auto
              height 100%
          .icon-desc
            position absolute
            left 0
            right 0
            bottom 0
            height .44rem
            line-height .44rem
            text-align center
            color $darkTextColor
    </style>

Home.vue:

<template>
      <div>
        <home-header></home-header>
        <home-swiper></home-swiper>
        <home-icons></home-icons>  （新增的）
      </div>
    </template>
    
    <script>
    import HomeHeader from './components/Header'
    import HomeSwiper from './components/Swiper'
    import HomeIcons from './components/Icons' （import引入）
    export default {
      name: 'Home',
      components:{
        HomeHeader,
        HomeSwiper,
        HomeIcons   （注册）
      },
      data () {
        return {
          
        }
      },
      computed: {},
      created () {},
      methods: {}
    }
    </script>
    <style lang="less" scoped></style>

### 图标区域逻辑实现 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_27_color_FFFFFF_t_70 1][]

Icons.vue：

<template>
      <div class="icons">
        <swiper :options="swiperOption">
          <swiper-slide v-for="(page,index) of pages" :key="index"
          >
            <div 
              class="icon"
              v-for="item of page"
              :key="item.id"
            >
              <div class="icon-img">
                <img class="icon-img-content" :src="item.imgUrl" alt="">
              </div>
              <p class="icon-desc">{
       {item.desc}}</p>
            </div> 
          </swiper-slide>
        </swiper>
      </div>
    </template>
    <script>
    export default {
      name: 'HomeIcons',
      data () {
        return {
          swiperOption:{
            autoplay: false
          },
          iconList: [
            {
              id:'0001',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
              desc: '景点门票'
            },
            {
              id:'0002',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png',
              desc: '泡温泉'
            },
            {
              id:'0003',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
              desc: '成都必游'
            },
            {
              id:'0004',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png',
              desc: '川剧变脸'
            },
            {
              id:'0005',
              imgUrl:'https://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',
              desc: '打卡圣地'
            },
            {
              id:'0006',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/ea/01d081dacb03cc02.png',
              desc: '赏秋色'
            },
            {
              id:'0007',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',
              desc: '一日游'
            },
            {
              id:'0008',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/54/35899492b1302802.png',
              desc: '成都熊猫基地'
            },
             {
              id:'0009',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
              desc: '全部'
            }
          ]
        }
      },
      computed: {
        pages () {
          const pages = []
          this.iconList.forEach((item,index) => {
            const page = Math.floor(index / 8)
            if(!pages[page]) {
              pages[page] = []
            }
            pages[page].push(item)
          })
          return pages
        }
      }
    }
    </script>
    <style lang="stylus" scoped>
      @import '~styles/varibles.styl';
      @import '~styles/mixins.styl';
      .icons >>> .swiper-container
        height 0
        padding-bottom 50%
      .icon
        position relative
        overflow hidden
        float left
        width 25%
        height 0
        padding-bottom 25%
        .icon-img
          position absolute
          top 0
          left 0
          right 0
          bottom .44rem
          box-sizing border-box
          padding .1rem
          .icon-img-content 
            display block
            margin 0 auto
            height 100%
        .icon-desc
          position absolute
          left 0
          right 0
          bottom 0
          height .44rem
          line-height .44rem
          text-align center
          color $darkTextColor
          ellipsis() 
    </style>

注意：这里css样式设置布局和计算属性来把原来的数组处理成了一个二维数组

mixins.styl（用stylus把常用的样式封装起来）：

ellipsis() 
      overflow hidden
      white-space nowrap
      text-overflow ellipsis

\*Icons.vue的css样式部分（注意这里是在Icons.vue里面的，使用stylus来写的css样式）：

\*计算属性（注意这里是Icons.vue中的计算属性，把iconList处理成的一个二维数组，再使用两层v-for来循环出所有的图标，让超过8个的图标数组可以显示在第二页，滑动可以看到）：

computed: {
        pages () {
          const pages = []
          this.iconList.forEach((item,index) => {
            const page = Math.floor(index / 8)
            if(!pages[page]) {
              pages[page] = []
            }
            pages[page].push(item)
          })
          return pages
        }
      }

第一页：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_27_color_FFFFFF_t_70 2][]

第二页：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_27_color_FFFFFF_t_70 3][]

### 推荐组建开发 ###

Recommend.vue

<template>
      <div>
        <div class="title">热销推荐</div>
        <ul>
          <li class="item border-bottom" v-for="item of recommendList" :key="item.key">
            <img class="item-img" :src="item.imgUrl" alt="">
            <div class="item-info">
              <p class="item-title">{
       {item.title}}</p>
              <p class="item-desc">{
       {item.desc}}</p>
              <button class="item-button">查看详情</button>
            </div>
          </li>
        </ul>
      </div>
    </template>
    <script>
    export default {
      name: 'HomeRecommend',
      data () {
        return {
          recommendList: [
            {
              id: '0001',
              imgUrl: 'http://img1.qunarzz.com/sight/p0/1612/1d/1d9a740c1f9e0efaa3.img.jpg_200x200_63285bd9.jpg',
              title: '成都海昌极地海洋公园',
              desc: '蠢萌企鹅陪你嗨翻这个秋'
            },
             {
              id: '0002',
              imgUrl: 'http://img1.qunarzz.com/sight/p0/201407/03/a584374ee80b738e2600d6bcaf1299e3.jpg_200x200_c26fb243.jpg',
              title: '都江堰',
              desc: '气势磅礴的“世界水利文化鼻祖'
            },
             {
              id: '0003',
              imgUrl: 'http://img1.qunarzz.com/sight/p0/201301/16/ae96ce4058bd5cf093835fbb.jpg_200x200_e4cb9743.jpg',
              title: '青城道温泉',
              desc: '吐纳青城气息，享受自然温暖'
            },
            {
              id: '0004',
              imgUrl: 'http://img1.qunarzz.com/sight/p0/201307/23/b8db11dca4378903c8d65eac.jpg_200x200_56f59a84.jpg',
              title: '成都动物园',
              desc: '?好评如潮，小伙伴热推景点~'
            }
          ]
        }
      }
    }
    </script>
    <style lang="stylus" scoped>
      @import '~styles/mixins.styl'
      .title
        margin-top .2rem
        line-height .8rem
        background #eee 
        text-indent .2rem
      .item
        overflow hidden
        display flex
        height 1.9rem
        .item-img
          width 1.7rem
          height 1.7rem
          padding .1rem
        .item-info
          flex 1
          padding .1rem
          min-width 0
          .item-title 
            line-height .54rem
            font-size .32rem
            ellipsis() 
          .item-desc
            line-height .4rem
            color #ccc
            ellipsis() 
          .item-button
            line-height .44rem
            margin-top .2rem
            background #ff9300
            padding 0 .2rem
            border-radius  .06rem
            color #fff
    </style>

Home.vue:

<template>
      <div>
        <home-header></home-header>
        <home-swiper></home-swiper>
        <home-icons></home-icons>
        <home-recommend></home-recommend>
      </div>
    </template>
    
    <script>
    import HomeHeader from './components/Header'
    import HomeSwiper from './components/Swiper'
    import HomeIcons from './components/Icons'
    import HomeRecommend from './components/Recommend'
    export default {
      name: 'Home',
      components:{
        HomeHeader,
        HomeSwiper,
        HomeIcons,
        HomeRecommend
      },
      data () {
        return {
          
        }
      },
      computed: {},
      created () {},
      methods: {}
    }
    </script>
    
    <style lang="less" scoped></style>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_27_color_FFFFFF_t_70 4][]

### 周末去哪儿-模块 ###

直接把Recommend.vue的内容复制到Weekend.vue中，然后把name修改了，在把样式修改了，就可以了

Weekend.vue:

<template>
      <div>
        <div class="title">周末去哪儿</div>
        <ul>
          <li 
            class="item border-bottom" 
            v-for="item of recommendList" 
            :key="item.key"
          > 
            <div class="item-img-wrapper">
              <img class="item-img" :src="item.imgUrl" alt="">
            </div>
            <div class="item-info">
              <p class="item-title">{
       {item.title}}</p>
              <p class="item-desc">{
       {item.desc}}</p>
            </div>
          </li>
        </ul>
      </div>
    </template>
    <script>
    export default {
      name: 'HomeWeekend',
      data () {
        return {
          recommendList: [
            {
              id: '0001',
              imgUrl: 'http://img1.qunarzz.com/sight/source/1509/ff/4184c6c13edbb.jpg_r_640x214_60474b61.jpg',
              title: '成都周边秋色',
              desc: '细数成都周边秋天最美仙境'
            },
             {
              id: '0002',
              imgUrl: 'http://img1.qunarzz.com/sight/source/1505/a2/78e4dbcfd45a6d.jpg_r_640x214_7a62b06a.jpg',
              title: '成都必游TOP10',
              desc: '成都的标志，也是现代人对老成都的记忆'
            },
             {
              id: '0003',
              imgUrl: 'http://img1.qunarzz.com/sight/source/1505/63/0ffcb5c329a19c.jpg_r_640x214_93fd1e5a.jpg',
              title: '慢游成都最美古镇',
              desc: '撷取一份悠闲，寻觅散落在时光里的幸福'
            },
            {
              id: '0004',
              imgUrl: 'http://img1.qunarzz.com/sight/source/1505/b8/e6206794272459.jpg_r_640x214_a002ded9.jpg',
              title: '郊野户外深呼吸',
              desc: '做个久违的深呼吸，来一场清肺之旅'
            }
          ]
        }
      }
    }
    </script>
    <style lang="stylus" scoped>
      @import '~styles/mixins.styl'
      .title
        margin-top .2rem
        line-height .8rem
        background #eee 
        text-indent .2rem
      .item-img-wrapper
        overflow hidden
        height 0
        padding-bottom 33.9%
        .item-img
          width 100%
      .item-info
        padding .1rem
        .item-title 
          line-height .54rem
          font-size .32rem
          ellipsis() 
        .item-desc
          line-height .4rem
          color #ccc
          ellipsis() 
    </style>

Home.vue

<template>
      <div>
        <home-header></home-header>
        <home-swiper></home-swiper>
        <home-icons></home-icons>
        <home-recommend></home-recommend>
        <home-weekend></home-weekend>
      </div>
    </template>
    
    <script>
    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'
    export default {
      name: 'Home',
      components:{
        HomeHeader,
        HomeSwiper,
        HomeIcons,
        HomeRecommend,
        HomeWeekend
      },
      data () {
        return {
          
        }
      },
      computed: {},
      created () {},
      methods: {}
    }
    </script>
    
    <style lang="less" scoped></style>

显示效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_27_color_FFFFFF_t_70 5][]

### Ajax获取首页数据 ###

这里使用vue推荐的axios来实现Ajax的请求

因为不是每一个人都有服务器来实现请求，所以这里我们使用模拟的数据来实现请求

*  首先安装axios来实现Ajax请求数据
    
        npm install axios --save
    
    在Home.vue中引入：
    
        import axios from 'axios'
    
        mounted () {
            this.getHomeinfo()
          },
          methods: {
            getHomeinfo () {
              axios.get('/api/index.json')
                .then(this.getHomeinfoSucc)
            },
            getHomeinfoSucc (res) {
              console.log(res)
            }
          }
    
    上面就是在Home.vue中的axios的使用
 *  在static文件夹下新建一个mock文件夹，新建一个index.json文件，用来模拟数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70][]

index.json:

{
      "ret": true,
      "data": {
        "city": "成都",
        "swiperList": [
          {
              "id": "0001",
              "imgUrl": "http://img1.qunarzz.com/piao/fusion/1810/e0/c99056cd01148902.jpg_750x200_8b93d0b5.jpg"
          },
          {
              "id": "0002",
              "imgUrl": "http://img1.qunarzz.com/piao/fusion/1808/7e/19b06067afac3402.jpg_750x200_f613313a.jpg"
          },
          {
              "id": "0003",
              "imgUrl": "http://img1.qunarzz.com/piao/fusion/1809/2d/0d7dc3400a50b502.jpg_750x200_4ca95dd4.jpg"
          }
        ],
        "iconList": [
          {
            "id": "0001",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
            "desc": "景点门票"
          },
          {
            "id": "0002",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png",
            "desc": "泡温泉"
          },
          {
            "id": "0003",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png",
            "desc": "成都必游"
          },
          {
            "id": "0004",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png",
            "desc": "川剧变脸"
          },
          {
            "id": "0005",
            "imgUrl": "https://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png",
            "desc": "打卡圣地"
          },
          {
            "id": "0006",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/ea/01d081dacb03cc02.png",
            "desc": "赏秋色"
          },
          {
            "id": "0007",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
            "desc": "一日游"
          },
          {
            "id": "0008",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/54/35899492b1302802.png",
            "desc": "成都熊猫基地"
          },
           {
            "id": "0009",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
            "desc": "全部"
          }
        ],
        "recommendList": [
          {
            "id": "0001",
            "imgUrl": "http://img1.qunarzz.com/sight/p0/1612/1d/1d9a740c1f9e0efaa3.img.jpg_200x200_63285bd9.jpg",
            "title": "成都海昌极地海洋公园",
            "desc": "蠢萌企鹅陪你嗨翻这个秋"
          },
           {
             "id": "0002",
             "imgUrl": "http://img1.qunarzz.com/sight/p0/201407/03/a584374ee80b738e2600d6bcaf1299e3.jpg_200x200_c26fb243.jpg",
            "title": "都江堰",
            "desc": "气势磅礴的“世界水利文化鼻祖"
          },
           {
            "id": "0003",
            "imgUrl": "http://img1.qunarzz.com/sight/p0/201301/16/ae96ce4058bd5cf093835fbb.jpg_200x200_e4cb9743.jpg",
            "title": "青城道温泉",
            "desc": "吐纳青城气息，享受自然温暖"
          },
          {
            "id": "0004",
            "imgUrl": "http://img1.qunarzz.com/sight/p0/201307/23/b8db11dca4378903c8d65eac.jpg_200x200_56f59a84.jpg",
            "title": "成都动物园",
            "desc": "?好评如潮，小伙伴热推景点~"
          }
        ],
        "weekendList": [
          {
            "id": "0001",
            "imgUrl": "http://img1.qunarzz.com/sight/source/1509/ff/4184c6c13edbb.jpg_r_640x214_60474b61.jpg",
            "title": "成都周边秋色",
            "desc": "细数成都周边秋天最美仙境"
          },
            {
            "id": "0002",
            "imgUrl": "http://img1.qunarzz.com/sight/source/1505/a2/78e4dbcfd45a6d.jpg_r_640x214_7a62b06a.jpg",
            "title": "成都必游TOP10",
            "desc": "成都的标志，也是现代人对老成都的记忆"
          },
            {
            "id": "0003",
            "imgUrl": "http://img1.qunarzz.com/sight/source/1505/63/0ffcb5c329a19c.jpg_r_640x214_93fd1e5a.jpg",
            "title": "慢游成都最美古镇",
            "desc": "撷取一份悠闲，寻觅散落在时光里的幸福"
          },
          {
            "id": "0004",
            "imgUrl": "http://img1.qunarzz.com/sight/source/1505/b8/e6206794272459.jpg_r_640x214_a002ded9.jpg",
            "title": "郊野户外深呼吸",
            "desc": "做个久违的深呼吸，来一场清肺之旅"
          }
        ]
      }
    }

*  修改webpack配置（修改config/index.js）：

proxyTable: {
          
    },

在dev下的proxyTable中新增下面的内容

proxyTable: {
          '/api': {
            target: 'http://localhost:8080',
            pathRewrite: {
              '^/api': '/static/mock'
            }
          }
    },

作用是使我们在开发环境访问API的index.json时自动去找模拟的数据（/static/mock/index.json），而在正式环境时就访问正式的接口，减少后期的更改请求接口的问题

### 首页父子组件数据传递 ###

在Home.vue中获取全部的数据，然后在传递给子组件

*  首先，在Home.vue的data中定义需要传递的数据名称

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 1][]

*   然后把取到的值赋值给data中的定义好的属性

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 2][]

*  最后传递给子组件，子组件接受

传递给子组件（通过属性的方式）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 3][]

子组件接受：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 5][]

注意：这里list：Array和city：String是表示子组件接受父组件传递来的数据是什么类型的，如果父组件传递的不是这个类型的就会报错，

还有就是在swiper.vue中会出现轮播图显示的是最后一张图片，因为父组件传递了一个空数组造成，这里这样处理

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 7][]

然后这里实现的是当数组为空时，swiper不会进行循环，首页部分就完成了

最最最后就是把代码提交到GitHub上（我的这个练手项目在github上地址：[项目地址][Link 2]，有需要的小伙伴可以拉取下来，运行下）

[Link 1]: http://piao.qunar.com/touch/
[70]: /images/20220504/b695c7ee60a14598b7d80f8ad7e9c36c.png
[iconfont]: http://www.iconfont.cn
[70 1]: /images/20220504/1d58ac0577f740f4ad1a4b46c6844da6.png
[70 2]: /images/20220504/7b3e3b4f7e8a445a8781738dfd89378f.png
[70 3]: /images/20220504/2128d3dd48a94de9bc61ed6915911aa9.png
[70 4]: /images/20220504/d0d0b4ea0a2242c1844d77126b847dc8.png
[GitHub--]: https://www.cnblogs.com/autoXingJY/p/9004724.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_27_color_FFFFFF_t_70]: /images/20220504/301116915e414663a18c629e7b3155e7.png
[vue-awesome-awiper]: https://github.com/surmon-china/vue-awesome-swiper
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_27_color_FFFFFF_t_70 1]: /images/20220504/475ab5083f684c76ab70bc45cbaacf6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_27_color_FFFFFF_t_70 2]: /images/20220504/633856042f574b58bc9fb646e0582381.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_27_color_FFFFFF_t_70 3]: /images/20220504/a910d60adaa04bf797b8451ab845fc60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_27_color_FFFFFF_t_70 4]: /images/20220504/99e8ba315344487e9174da327b45e48b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_27_color_FFFFFF_t_70 5]: /images/20220504/62894261e44a4355aff32e30c55d2566.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70]: /images/20220504/d75e355f9a9646e992ffa21eefb77a69.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 1]: /images/20220504/75da0c3aa4694bb1b60bb3728a13ad16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 2]: /images/20220504/dd7576f240554664a671757cb3f845a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 3]: /images/20220504/60fcf684536440b3ab62e2c8b1754300.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 4]: /images/20220504/0dd4653ced574544b1022c28f5474245.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 5]: /images/20220504/87a7d9127d594676986956df0f6664a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 6]: /images/20220504/d79b728f9a99492dbc18ce106ec6ebb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 7]: /images/20220504/402129287b9b47719cb1699b2436bb3d.png
[Link 2]: https://github.com/HZhen/Vue-project/tree/master/Vue4-vue%E9%A1%B9%E7%9B%AE%E9%A2%84%E7%83%AD/Travel