距离我完成这个去哪网项目时间已经过去有一个多月了,由于最近要面试就想把自己做的项目流程梳理一遍。
项目源码地址? :https://github.com/CarrieZY/Vue
Vue2.x开发项目笔记
总结项目用到的
技术栈:
前端:
- Vue 构建用户界面的 MVVM 框架,核心是响应的数据绑定和组系统件。
- vue-router:为单页面应用提供的路由系统,项目上线前使用了路由懒加载技术,来异步加载路由优化性能。
- vuex:Vue 集中状态管理,在多个组件共享某些状态时非常便捷。
- axios:服务端通讯。基于 Promise 的网络请求插件
- vue-lazyload:第三方图片懒加载库,优化页面加载速度vue-lazyload:第三方图片懒加载库,优化页面加载速度
- better-scroll:iscroll 的优化版,使移动端滑动体验更加流畅better-scroll:iscroll 的优化版,使移动端滑动体验更加流畅
- sass:css 预编译处理器sass:css 预编译处理器
- ES6:ECMAScriptES6:ECMAScript
- vue-awesome-swiper: 图片轮播插件
- vue-awesome-swiper: 图片轮播插件 vue-awesome-swiper: 图片轮播插件
- fastClick: 解决300毫秒点击事件延迟问题fastClick: 解决300毫秒点击事件延迟问题.
后端:使用data.json模拟的mack数据
技术点分析
当网速过慢的时候获取资源导致的页面抖动问题!!
如果网速过慢。比如一个dom中有图片、就会出现突然出现一张图片的问题。导致页面变化、这个时候如果是移动端我觉得可以加一个loading来处理这种问题(使用上面的vue-lazyload第三方的图片懒加载库)。同时也可以选择在一开始的时候就预留位置
overflow hidden
width 25%
height 0
padding-bottom 25%
这里的百分比是相对宽度的百分比,更具实际情况而定!
函数节流
函数节流:一个函数在执行一次后,只有大于设定的执行周期后,才会执行第二次。
在项目中使用better-scroll滚动插件时,我们可以设置节流来提高效率,比如滚动事件如果在一定时间内连续滚动则不进行处理,直到最后确定滚动出来了,这样能提高性能。常见解决方式是设置一个定时器来进行解决。
if (this.timer) {
clearTimeout(this.timer)
}
this.timer = setTimeout(() => {
const touchY = e.touches[0].clientY - 79
const index = Math.floor((touchY - this.startY) / 20)
if (index >= 0 && index < this.letters.length) {
this.$emit('chooseLetter', this.letters[index])
}
}, 16)
优化 减少页面数据请求次数 keep-alive
使用keep-alive可以进行缓存,这样就不会每次进入相同的页面都会进行数据请求了,能提高用户体验、在使用keep-alive以后会多两个生命周期函数:activated以及deactivated,我们可以在这里进行一些判断操作,来决定是否需要缓存,是否需要执行数据获取。此外,如果我们是给整个路由router-view组件进行了keep-alive,并且在这里执行了一些exinclude设置。
<keep-alive exclude="Detail">
<router-view/>
</keep-alive>
城市列表的功能点完成
这个和我的上一篇笔记《Vue2.x开发goods页面(点击侧边导航滑动到当前位置)》逻辑功能实现相同 可以点开查看 (算是比较详细了)。
实现icon图导航区域的轮播
同样依赖于swiper插件实现,只不过通过计算出swiper-slide下面icon图标的个数,当多出一面导航的icon时 显示后面一面,出现轮播的效果。
computed:{
//计算nav的icon
pages(){
const pages=[];
this.items.forEach((item,index) =>{
const page = Math.floor(index/8)
if(!pages[page]){
pages[page]=[]
}
pages[page].push(item)
})
return pages
console.log(pages)
}
},
在swiper-silder中v-for循环数据
<swiper-slide v-for="(page,index) in pages" :key="index">
<div class="icons" v-for="item in page" :key="item.id"><img :src="item.src" alt=""><p>{{item.title}}</p></div>
</swiper-slide>