Vue.js开发去哪儿网旅游网站全纪录
因为是第一个使用vue.js开发的项目，把整个过程记录下来，希望以后开发其他项目能用得到
一、项目环境搭建
1.1、使用vue-cli搭建环境,当前是3.X版本
vue create vue-travel
会提示使用最简设置或自定义设置
1.2、推荐在根目录下新建pages目录，home子目录，新建Home.vue作为首页组件，新建components目录存放首页的子组件
二、引入样式表、fastclick库
2.1、引入reset.css 和 border.css
将reset.css 和 border.css 放入目录 src/resets/styles目录下，因为全站都要使用，所以在home.js中引入即可
import './resets/styles/reset.css' import './resets/styles/border.css'
通过配置vue.config.js可，将@/resets/styles/目录设置别名为styles，这样引入代码就可以这样写：
import 'styles/reset.css' import 'styles/border.css'
2.2、引入fastclick库
在移动开发中，某些机型、浏览器中，click事件要延迟300ms才会执行，所以需要引入fastclick解决这个问题
npm install fastclick --save
添加--save是为了保证线上和开发环境都可以引入库
在main.js中引入并应用fastclick
import fastClick from 'fastclick' fastClick.attach(document.body)
三、首页开发
3.1Header区域的开发
3.2开发轮播图部分
《vue-awesome-swiper轮播插件的使用》
知识点一：css穿透
swiper默认的按钮为蓝色按钮，我们直接定义.swiper-pagination-bullet-active为白色，发现并不起作用。这是因为我们的style设置了scope，只对当前组件起作用。
可以这样设置 .swiper-wrapper >>> .swiper-pagination-bullet-active background #fff
知识点二：CSS防止元素抖动
因为轮播图区块高度没有定义，所以当图片没有加载出来时，区块高度为0，图片加载出来后高度变大，可能导致后面的元素出现抖动。可以给轮播图区块添加如下css代码width:100%; overflow:hidden; height:0; padding-bottom:35%; //35%为图片的高度与宽度比例
备注：新的vue-awesome-swiper已经没有元素抖动的问题了，这个解决方式可以应用到其他地方
3.3、按钮导航区域的开发
《vue结合vue-awesome-swiper做按钮导航的开发》
3.4、热销区域的开发
3.5、周末去哪儿区域的开发
3.6、使用axios发送ajax请求
当axios发送get请求时，本地开发时请求的url和线上运行时一般是不同的，但是上线前修改是有很大风险的。所以可以通过代理功能将get请求的路径做一下设置
3.7将请求的ajax数据应用到组件上“父子组件数据传递”
《vue父子组件之间传值》
知识点一：swiper数据渲染
当swiper的数据是由ajax获取的数据赋值时，会出现错误。原因是swiperList默认是空数组，swiper是由空数组创建的，就会出现问题。
解决如下：
computed: {
showSwiper () {
return this.swiperList.length
}
}代码意思是有数据时返回真
<swiper :options="swiperOption" v-if="showSwiper">
四、城市列表页面开发
4.1、路由配置
编辑router.js,import城市页面组件并添加路由规则
知识点：router-link
vue中，用router-link生成一个a标签，格式为：<router-link to="/city">城市</router-link>
4.2、header区域开发
4.3、搜索框区域开发
知识点：CSS3 box-sizing 属性
当使用padding会将区块宽度撑开时，可以给区块一个box-sizing:border-box属性
4.4、列表区域开发
这一部分开发的重点是better-scroll的使用、数据渲染、字母表数据渲染、点击字母跳转到对应内容
《vue兄弟组件之间的联动，结合better-scroll实现动态效果》
4.9、引入localStorage
4.10、使用keep-alive优化网页性能
当home页和city页开发好以后，通过控制台的network-XHR发现，每切换一下路由，都要重新发送index.json和city.json的请求
修改app.vue
<router-view/>
修改为：
<keep-alive> <router-view/> </keep-alive>
五、详情页面开发
5.1、详情页动态路由及banner布局
下一篇 >>