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

首页开发注意：项目的图片资源都是去哪儿网站的在线图片(图片来源网站),只可以用来练习哦，小心侵权1. 首页header区域开发在home目录下新建一个components文件夹，然后把首页home拆分成不同的组件放在components文件夹下，最后通过在home.vue中引用对应的组件就可以了主要编写的代码有Home.vue和Header.vue h...

任性的我

60778人浏览 · 2018-10-29 22:39:18

任性的我 · 2018-10-29 22:39:18 发布

首页开发

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

1. 首页header区域开发

在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网站注册登录后，并创建自己的项目的图标库后，把你需要的图标加入到这个项目中

下载到本地后，在项目的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;
}

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

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

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

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

使用：

 <i class="iconfont">&#xe624;</i>

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

然后在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--创建新的分支(转)）

使用轮播图需要安装一个插件（插件地址：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>

图标区域逻辑实现

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样式）：

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

*计算属性（注意这里是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
    }
  }

第一页：

第二页：

周末去哪儿-模块

直接把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>

显示效果：

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文件，用来模拟数据

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中定义需要传递的数据名称

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

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

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

子组件接受：

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

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

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

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^