VUE去哪儿网 2 项目首页

使用stylus（css开发的辅助工具）

在travel目录下：

npm install stylus --save
npm install stylus-loader --save

组件化开发

import HomeHeader from './components/Header'
export default {
  name: 'Home',
  components: {
    HomeHeader
  }
}

scoped只对当前组件产生影响

<style lang="stylus" scoped>

令搜索框自动撑开  使用flex

  .header
    display: flex
    height: .86rem
    .header-left
      width: .64rem
      float: left
    .header-input
      flex: 1
    .header-right
      width: 1.24rem
      float: right

使用iconfont

改一下iconfont.css里的路径

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

解决inline-block元素默认间距：给父级元素写font-size:0; 子元素正常设置字体大小。

---

定义变量并在stylus中使用 提高可维护性 样式里面引入样式@import   variables.styl

$bgColor = #00bcd4

修改了webpack配置项后要重启一下服务器 css中引用其他样式要加～

 

---

轮播图(vue-awesome-swiper)

新建分支index-swiper

git pull
git checkout index-swiper
npm install vue-awesome-swiper@2.6.7 --save

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

图片宽高比例自适应 用padding-bottom

.wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 31.25%

显示不出来小圆点，白熬夜找了半天bug发现 slot那句居然没写，文件头部居然多了个script标签qaq

<div class="swiper-pagination" slot="pagination"></div>

合并到master分支

git checkout master
git merge origin/index-swiper
git push

---

icons滑动多页显示

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

当数据很多用…提示

overflow: hidden
white-space: nowrap
text-overflow: ellipsis 

（本来课程中要用mixins封装，但是新版api不能那么用函数了）

---

推荐组件

本来要在img标签外部包裹一层div，用来帮助撑开图片高度，防止页面的抖动，但这里img宽高是定死的所以可以去掉

item-info用内容自动的撑开盒子：

 .item-info
      flex: 1

一像素边框 class加一个border-bottom

flex盒子 要使用…  min-width: 0 

---

Ajax获取首页数据

安装axios 

npm install axios --save

import axios from 'axios'

发现忘了合并推荐模块的代码

git branch
git merge index-recommend

在Home.vue中使用生命周期函数 moundted 

(mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。)

methods: {
    getHomeInfo () {
      axios.get('/api/index.json')
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.city = data.city
      }
    }
  },
  mounted () {
    this.getHomeInfo()
  }
}

在没有后端支持的情况下实现数据的模拟 static目录下创建一个mock文件夹 

这部分数据不希望提交到线上 .gitignore中添加static/mock

由于上线之前改动代码有风险，希望有个转发机制可以吧/api形式的对json文件的请求转发到本地的mock文件夹下

在config>index.js中：

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

（实际上这个转发机制是webpack-dev-server提供的）

改变配置项文件后需要重启一下服务器

---

首页父子组件数据传递

Home.vue:

<home-header :city="city"></home-header>

data () {
    return {
      city: ''
    }
  },

 

getHomeInfoSucc (res) {
    res = res.data
    if (res.ret && res.data) {
    this.city = res.data.city
    }
}

Header.vue: 加个props

export default {
  name: 'HomeHeader',
  props: {
    city: String
  }
}

（这里北京一直没显示结果发现是模拟json文件里没有city数据，加上“city”：“北京”就好了）

解决轮播图部分默认首先展示最后一张图：

由完整的数组创建而不是空数组创建

<swiper-slide v-for="item of list" :key="item.id" v-if="list.length">

（空数组时v-if为false swiper不会被创建）

在模版里尽量避免产生逻辑性的代码，所以增加一个计算属性，改成：

 <swiper-slide v-for="item of list" :key="item.id" v-if="showSwiper">

  computed: {
    showSwiper () {
      return this.list.length
    }
  }