Vue.js 入门 ：去哪儿网APP案例 学习记录

推荐博客

Vue 2.5 开发 去哪儿 旅游网站项目记录

项目源码 ： https://gitee.com/doublesgzl/Travel

第六章 项目实战

---

6-1 环境配置 （建议看下视频）
6-2 项目代码介绍
6-3 单文件组件与Vue中的路由
6-4 单页应用VS多页应用 解析1、解析2、解析3 GOOD
6-5 项目代码初始化

---

第7章 旅游网站首页开发

---

1.首页header开发
2.stylus预处理器的使用
3.iconfont 的使用
4.首页轮播图
5.图标区域页面布局和逻辑实现 参考
6.热销推荐组件和周末游组件开发
7.ajax 请求获取首页数据

---

1.首页header开发

1-1 创建Home.vue的子组件

• pages/home/components/Header.vue
• 在pages/home/Home.vue组件中引入子组件Header.vue，

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

4-3 给轮播插件添加底部的轮播点
第一步，在data中返回pagination: '.swiper-pagination'，发现底部出现蓝色的点；

 data: function () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination'
      }
    }
  }

第二步，设置点的样式，不能写在.wrapper的下面，会失效！！！

// 样式穿透
.wrapper >>> .swiper-pagination-bullet-active
    background: #fff

4-4 swiper轮播图的图片循环

第一步，在swiper下面只保留一个swiper-slide标签，设置v-for=''item of SwiperList"；

第二步，在data中加入轮播图片数据

data: function () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true  // 用于循环轮播，否则第一张图片前面就空了
      },
      SwiperList: [{
        id: '0001',
        imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20197/ae8987bff39ff10e82675a3643154e66.jpg_750x200_0f187b2e.jpg'

      }, {
        id: '0002',
        imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20197/e43d3043ee612ad71dd6c68f29e3ed9a.jpg_750x200_b90f2963.jpg'
      }, {
        id: '0003',
        imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/d7bbc21db442366a882e04ddc984669a.jpg_750x200_85e640d9.jpg'
      }]
    }
  }

4-5 保存代码到本地仓库并提交到线上仓库

master分支放的是整个项目所有功能最新的代码，index-swiper分支上放的是具体功能开发完成的代码。一般开发时会自己开发一个新的分支，测试没问题后整合到master分支上。

• git add .
• git commit -m 'change'
• git push （把本地index-swiper分支上的内容提交到线上index-swiper分支上）
• git checkout master (合并，先切换到master分支上)
• git merge origin/index-swiper (把线上index-swiper分支新增的内容合并到本地merge分支)
• git push (把master分支的内容也提交到线上)

5.图标区域页面布局和逻辑实现

5-1 在线上git仓库上新建一个index-icons分支，然后在终端获取新创建的分支到本地

• git pull
• git checkout index-icons

5-2 实现图标区域布局，定义样式

5-3 图标区域逻辑实现，多页切换的轮播效果展示。
同Swiper组件在data中return一个iconsList数组，在template中使用轮播结构放入每个图标模块。 并在Chrome浏览器上安装Vue devtools插件（一种vue的调试工具），安装完毕后重启浏览器，在浏览器开发者工具的最上面一栏的最后就可以看见Vue一项了。

问题(1)：当只有一条数据时，页面中仅可以操控图标模块范围进行滑动，在别的空白区域却不行，这里需要设置swiper的.swiper-container样式为icons的样式，从而解决此问题，.swiper-container类你可以在浏览器开发工具中选中区域进行查看。

.icons >>> .swiper-container
    width :100%
    height :0
    padding-bottom :50%

问题(2)：若共有10条数据，当前页面只能显示8条，另外两条被隐藏了，也无法滑动显示，此时，利用Vue中的计算属性来控制每个轮播页中数据的显示 ，更新swiper的数据绑定。

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

   
      
        

          

            
          
          
{{item.desc}}
        
      
    

5-4 用省略符代替长串文字，通过CSS样式控制

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

5-5 将省略符的CSS代码封装
创建styles/mixins.styl文件，写入以下代码，在Icons.vue的style标签内导入@import '~styles/mixins.styl'，然后用ellipse()一句话即可

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

.icon-text
      ...
      ellipse()

5-6 保存代码到本地仓库并提交到线上仓库

• git add .
• git commit -m 'change'
• git push
• git checkout master
• git merge origin/index-swiper
• git push

6.热销推荐组件和周末游组件开发

6-1 在git线上仓库中创建index-recommend分支，在终端Travel下依次执行

• git pull
• git checkout index-recommend

6-2 新建components/Recommend.vue组件，同Home.vue组件连接；

6-3 先搭建好页面结构和CSS样式，再循环显示数据，套路基本同上

6-4 周末游组件开发 代码同6差不多 微调就行
6-5 保存代码到本地仓库并提交到线上仓库
- git branch (查看所有分支)

7.ajax 请求获取首页数据

7-1 线上git仓库创建index-ajax分支，下载到本地仓库

• git pull
• git checkout index-ajax

7-2 如何在没有后端支持的情况下实现数据的模拟？？
创建static/mock/index.json文件，将swiperList，iconsList，recommendList，WeekendList等本地开发的模拟数据放置到index.json中。之所以放到static文件夹下，是因为static文件夹里的内容可直接被外界访问到，比如在浏览器中输入http://localhost:8080/static/mock/index.json，就可以显示出/index.json中的内容。

7-3 /index.json中存储的是一些本地开发的模拟数据，并不希望它同代码上传到本地/线上仓库，此时，在.gitignore文件中添加static/mock即可。

7-4 统一在Home.vue中发送一次Ajax请求，而不要试图在每个组件中都发送Ajax请求：
（1）首先在Home.vue中导入import axios from 'axios'，记得提前安装axios库；
（2）让页面挂载好之后去执行getHomeInfo()方法；

mounted () {
    this.getHomeInfo()
  }

（3）在函数中定义getHomeInfo()方法，去获取Ajax数据，axios返回的结果是一个promise对象；数据获取成功后调用getHomeInfoSucc()输出结果。

methods: {
    getHomeInfo () {
      axios.get('/api/index.json')
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      console.log(res)
    }
  }

7-5 在实际项目开发中，不建议随意改动axios.get(‘/api/index.json’)中的地址，那如何转换到本地模拟的接口地址（/static/mock/index.json）呢？
【解决】在vue中提供了proxy代理功能，以此实现接口地址的转换。在config/index.js文件中设置：

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

这里理解成用"/api"代替target里面的地址，后面组件中调用接口时直接用api代替 。比如调用"http://localhost:8080/static/mock/index.json"，直接写"/api/index.json"即可。注意，它不是vue提供的，而是webpack dev server 提供的。

7-6 首页父子组件的数据传递
在父组件中

export default {
  ...
  data () {
    return {
      city: '',
      SwiperList: []
    }
  },
  mounted () {
    this.getHomeInfo()
  },
  methods: {
    getHomeInfo () {
      axios.get('/api/index.json')
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      res = res.data
      if (res.ret && res.data) {
        this.city = res.data.city
        this.SwiperList = res.data.swiperList
      }
    }
  }
 }

在子组件中，props是子组件访问父组件数据的唯一接口。若子组件想引用父组件的数据，需要在props中声明一个变量city，变量city就可以引用父组件的数据（）。然后在子组件