去哪儿项目总结

1.项目组成

分为主页、详情以及城市列表

2.项目准备

• 安装vue脚手架，创建项目
• 下载icon图标，放在assets文件夹
• 将json放在static文件夹里
• 在config文件夹里的index.js中配置跨域
• cnpm install --save 下载axios css预处理器进行样式布局
• cnpm install stylus --save -dev 下载stylus

3.首页

• 在components同级创建一个pages文件夹
• 在pages文件夹下创建一个首页的文件夹home
• 进行路由配置
• 将首页分为头部、轮播图、图标宫格、热销推荐以及周末组件
• 在pages里再创建一个文件夹放置子组件

头部

1. 在头部组件中进行头部布局 ，分为左中右三部分
2. 将头部组件引入到home父组件中
3. 左边引入下载的icon图标返回，中间放置icon图标input框，右边放置城市名称以及icon中一个箭头向下的图标
4. 引入styles文件中的样式用弹性盒子将他们放在一行
5. 给中间的input一个flex：1 让他占一份
6. 给右边盒子一个min-width最小宽度让给他可以进行比例缩放
7. 背景图用我们在varibles.styl中的样式

轮播图

1. 将轮播组件引入到home父组件中
2. cnpm install vue-awesome-swiper@2.6.7 --save下载轮播图插件
3. 在main.js中进行引入
4. 现在home父组件中引入axios
5. 引入json文件，进行获取数据并将轮播图数据传入到轮播组件中
6. 在子组件中用props进行接收，通过for循环进行渲染
7. 设置swiperOption属性， loop:为true让它可以进行轮播
8. 会产生页面抖动，可以用overflow: hidden并给一个内边距让他自行撑开，这样就可以解决抖动问题

 图标宫格

1. 图标宫格也要用swiper标签进行轮播页面
2. 将图标宫格的数据通过父组件传递到子组件
3. 在子组件中用props进行接收，通过for循环进行渲染
4. 用定位进行图标分布
5. 用计算属性来监听页码，遍历图标数据，判断如果有多出的数据就放在下一页面
6. 并且用swiper插件还可以轮播

 热销推荐和去哪儿列表

1. 用props获取父组件传过来的数据进行渲染
2. 背景颜色引入varibles.styl中的样式

详情

• 点击热销的查看详情携带id进入详情列表
• 详情分为头部、轮播图以及详情列表

头部 

1. 头部返回箭头用icon图标的返回标签
2. 用v-show来进行判断头部和轮播图的显示与隐藏

轮播图

1. 接受父组件传过来的数据，进行渲染
2. 将介绍和图片数量用定位放在左下角和右下角
3. 在左上角用定位放一个icon的返回图标，给一个点击事件$router.go(-1)让他可以返回
4. 用swiper标签，让他可以轮播
5. 给盒子一个弹性布局让他在一行显示
6. 给图片一个width: 100%让他可以全部显示
7. 要给图片一个点击事件，this.showGallary = true让图片可以放大
8. 再给一个事件this.showGallary = false点击关闭

 详情列表

1. 将detail获取的数据传入list组件中
2. 列表页用props进行接收并渲染第一级
3. 渲染第二级需要用到递归

城市列表

• 点击城市名称跳转到城市列表
• 城市列表分为头部、搜索、当前城市、热门城市以及全部城市
• 在city同级创建一个文件夹放置子组件

搜索

1. 给input进行双向数据绑定
2. 用props接受父组件传过来的所有城市的数据并渲染
3. 用事件监听来进行筛选搜索
4. 用计算属性来监听搜索出来的数据的长度
5. 回车之后用v-show让搜索的数据显示让列表隐藏，否则就让列表显示让搜索的数据隐藏
6. 给搜索的数据点击事件，点击时跳转到首页

 城市列表

当前城市

1. 用props接受父组件传过来的当前城市、热门城市、所有城市的数据
2. 下载cnpm install vuex --save在main.js中进行引入
3. 将vuex中的数据用this.$store.state.city展示到页面上
4. 热门城市也是通过接收过来的热门城市的数据进行渲染

全部城市

1. 通过全部城市的数据用两个循环进行渲染
2. 外层循环渲染城市的字母，内层循环渲染城市的名称

 字母表组件

1. 下载cnpm install better-scroll@1.8.1 --save并在main.js中进行引入，特可以进行拖动
2. 要将字母表组件定位在城市列表的右侧
3. 在字母组件中定义一个handleLetterClick事件，用$emit传给父组件进行监听
4. 父组件再将letter传给列表组件，循环加一个ref属性可以方便跳转
5. 在列表组件中监听传过来的letter的变化，就可以实现跳转了

总结与收获

这个项目主要以布局为主，项目的重难点主要在城市列表的字母与列表联动的地方，父子传值比较容易弄混，并且城市列表联动的插件用得到的一些事件比较难理解，但不用ui插件确实可以锻炼布局能力，也让我了解了更多关于布局样式的方法以及功能方法，收获颇多