vue2.5开发去哪儿了流程

初始化项目

• 在 src/assets 中添加样式初始化文件 reset.css ; border.css

• 本地引入取消延迟300毫秒的控件
  cnpm i fastclick -S

• 在mian.js中引入 初始化样式文件及文件的是用
  import fastClick from ‘fastclick’
  import ‘./assets/reset.css’
  import ‘./assets/border.css’

  fastClick.attach(document.body)

旅游网站首页开发

header区域开发

• 使用stylus编写css样式
  cnpm i stylus stylus-loader -S
• 给的UI涉设计图为750px 即使以iPhone6/7/8 为准
  - 在reset中设置
  html { font-size: 50px }
  - 在样式文件中单位就为UI设计图中原来的1%

iconfont的使用和代码优化

• https://www.iconfont.cn 选择图标并下载本地

• 在src/assets中放入iconfont目录及iconfont.css
• 修改iconfont.css文件中src: url()路径 ./iconfont/iconfont.eot..
• 在main.js中引入

  •   `import './assets/iconfont.css'`
    

• 创建公共样式 在style目录下创建varibles.styl

  •   `$bgColor = #00bcd4`
    

• 引入并使用

  •    `@import '~@/assets/styles/varibles.styl'`
    

  •   `background: $bgColor`
    

header.vue

<template>
  <div class="header">
    <div class="header-left">
      <div class="iconfont back-icon">&#xe624;</div>
    </div>
    <div class="header-input">
      <span class="iconfont">&#xe632;</span>
      输入城市/景点/游玩主题
    </div>
    <router-link to='/city'>
      <div class="header-right">
        <span class="iconfont arrow-icon">&#xe64a;</span>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/varibles.styl'
  .header
    display: flex
    line-height: .86rem
    background: $bgColor
    color: #fff
    .header-left
       .64rem
      float: left
      .back-icon
        text-align: center
        font-size: .4rem
    .header-input
      flex: 1
      height: .64rem
      line-height: .64rem
      margin-top: .12rem
      margin-left: .2rem
      padding-left: .2rem
      background: #fff
      border-radius: .1rem
      color: #ccc
    .header-right
      min- 1.04rem
      padding: 0 .1rem
      float: right
      text-align: center
      color: #fff
      .arrow-icon
        margin-left: -.04rem
        font-size: .24rem
</style>

首页轮播图

• 在GitHub中搜索 vue-awesome-swiper

  • https://github.com/surmon-china/vue-awesome-swiper

• 在组件实例属性name中不要写Swiper, 会导致swiper组件报错
• 避免轮播图未加载出来时下方的内容跑到上面来
  - 在html中外层添加 <div class='wraper'></div>
  - 在style中定义wraper高度 .wrapper{overflow hidden; 100%; height: 0; padding-bottom: 31.25% }
  padding-bottm: 轮播图的高度/轮播图的宽度*100%
  - 全局设置 swiper-pagination 的样式
  .wrapper >>> swiper-pagination-bullet-active( background: #f00)

swiper.vue

<template>
<div class="wrapper">
  <swiper :options="swiperOption">
    <swiper-slide  v-for="item in swiperList"><img class="swiper-img" :src="item.imgUrl"></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: '001',
        imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20192/9f73976e40c4ef845cabe0efc0269ebb.jpg_750x200_aab92b7a.jpg'
      },
      { id: '002',
        imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/2f5f3ea4698c9b7898db7562d89b91ed.jpg_750x200_bd3b4ce9.jpg'

      }, {
        id: '003',
        imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/534106663f424042868365167e4a66ff.jpg_750x200_3ec12f21.jpg'

      }]
    }
  }
}
</script>
<style lang="stylus" scoped>
  .wrapper >>> swiper-pagination-bullet-active
    background: #f00
  .wrapper
    overflow: hidden
     100%
    height: 0
    padding-bottom: 26.6666%
    .swiper-img
       100%
</style>