去哪网项目开发(5)--网站首页开发

1.安装依赖CSS库

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

2. 像素转换小技巧

rem的大小是相对于HTML这个根元素的大小的，因此如果我们把HTML元素的大小设置成50px；那么1rem === 50px。假设我有一个高度为86px设计，但是设计师一般给我们的设计稿图是2倍大小的，因此我们应该43px才可以，如果换成rem，则为0.86rem了，即86/100，因此所有的转换只需要用 设计稿大小/100就可以得到rem的值了。

3. 图标库的引用和使用：iconfont

4. stylus的使用：有一些公共样式需要我们抽离出来，比如背景的颜色，当需求改颜色的时候只需要改变量即可。

• 做法：新建一个.styl的文件，里面定义变量即可。
• 引入styl文件：@import “~@路径”
• 说明：CSS文件的引入需要@import，如果想从src路径下引入CSS文件则需要~@ ，其中@代表从根路径到src文件的路径简写。

5. 轮播图功能添加

借用插件vue-awesome-swiper

• 安装： npm install vue-awesome-swiper --save
• 指定版本号安装 npm install vue-awesome-swiper@2.6.7 --save

6.小技巧

如果网速不是特别快的话，图片加载的比较慢，那么图片后面的内容就会占据图片应该的位置，当图片加载出来后又会抢占自己的位置。这样，就会产生抖动的现象。
解决方法：

<style lang="stylus" scoped>
  .wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 58.7%    宽高比例
    background: #ccc		如果图片没有加载出来则显示灰色背景
    .swiper-img
      width: 100%
</style>

注意事项：

1. 每一次安装新的插件后都需要重启一下服务,即 npm run dev 一下

7. 样式穿透

有时候第三方组件库为我们定义好了组件的样式，但是我们不喜欢，所以需要修改，但是在Vue中的单文件组件中，样式被限定在了scoped上，对外面的没有任何影响，所以需要进行穿透：

8.一像素边框

在引入border.css文件后，只需要添加类class='border-bottom’即可在底部添加一像素边线。

9. Ajax获取首页数据

在Vue中发送ajax请求有好多方式，可以通过浏览器自带的fetch和Vue官方推荐的axios模块。

npm install axios --save

**注意：**不要在每一个组件中都去发送ajax，这样会大大降低性能，而是应该在总组件上发送ajax然后传递给每个子组件。

部分代码实现：

<template>
  <div>
    <home-header></home-header>
    <home-swiper></home-swiper>
    <home-icons></home-icons>
    <home-recommend></home-recommend>
    <home-weekends></home-weekends>
  </div>
</template>

<script>
import HomeHeader from './components/HomeHeader'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekends from './components/Weekends'
import axios from 'axios'

export default {
  name: 'Home',
  components: {
    HomeWeekends,
    HomeSwiper,
    HomeHeader,
    HomeIcons,
    HomeRecommend
  },
  methods: {
    getHomeInfo () {
      // axios.get()返回的是一个promise对象
      axios.get('/api/index.json')
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      console.log(res)
    }
  },
  mounted () {
    this.getHomeInfo()
  }
}
</script>

<style scoped>

</style>

但是如果我们没有后台给我们提供数据，那么就需要自己在static里文件夹中去模拟创造一些数据(因为只有static下的文件才能通过url地址拿到)，但是我们又不想在项目上线的时候去再次修改代码，所有可以通过设置代理的方式来实现：

10. 父组件向子组件传值

部分代码：

<template>
  <div>
    <home-header :city="city"></home-header>
    <home-swiper :list="swiperList"></home-swiper>
    <home-icons :list="iconList"></home-icons>
    <home-recommend :list="recommendList"></home-recommend>
    <home-weekends :list="weekendsList"></home-weekends>
  </div>
</template>

<script>
import HomeHeader from './components/HomeHeader'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekends from './components/Weekends'
import axios from 'axios'

export default {
  name: 'Home',
  data () {
    return {
      city: '',
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendsList: []
    }
  },
  components: {
    HomeWeekends,
    HomeSwiper,
    HomeHeader,
    HomeIcons,
    HomeRecommend
  },
  methods: {
    getHomeInfo () {
      // axios.get()返回的是一个promise对象
      axios.get('/api/index.json')
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      console.log(res)
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.city = data.city
        this.swiperList = data.swiperList
        this.iconList = data.iconList
        this.recommendList = data.recommendList
        this.weekendsList = data.weekendsList
      }
    }
  },
  mounted () {
    this.getHomeInfo()
  }
}
</script>

<style scoped>

</style>