vue去哪儿网项目总结
gitee项目仓库:https://gitee.com/braveheart-qw/travel
一、页面展示
二、项目环境
- IDE WebStorm
- Vue 2.6.11
- Vue-cli 4.5.4
- Npm 6.14.6
- Node 14.6.0
- Vue-router 3.2.0
- vuex 3.4.0
- Scss 1.26.5
- Axios 0.21.0
- Git
三、项目初始化
1.完善index.html中的移动端适配:
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
解决:用户在手机上随意放大缩小的问题
2.重置样式表 在入口文件引入reset.css文件,该reset.css文件存放在assets/style 文件夹下
解决:样式在不同手机上呈现效果不同的问题
3. Border.css
解决:1像素问题,什么叫1像素问题, 受物理设备的影响,1px在不同手机上所代表的含义可能不同
4.移动端300ms点击延迟的问题,当在移动端上使用click事件时,将会延迟300ms才会执行
解决:cnpm install fastclick --save-dev
四、项目细节
项目细节:
Index首页中
菜单轮播组件中的布局,采用flex布局,
样式设置为:
{
display:flex;
flex-wrap:wrap
}
采用flex布局,并且设置为自动换行
接下来为每个flex子项样式设置为:
{
min-width:25%;
max-width:25%
}
这样就可以实现每行4个菜单子项的展示效果
为什么采用以上布局呢,因为这样在循环菜单数组时,逻辑代码简洁明了,并且可维护性以及扩展性高。
然后使用swiper组件将菜单布局,包裹住就可以实现菜单项的轮播滑动
Swiper组件的注意事项,要想实现swiper公共组件的复用性以及扩展性,swiper组件的options参数应该由父组件传入,布局由slot插槽代替
城市页面:整体页面采用better-scroll插件库
重点:通过单击字母以及跟随滑动手势来实现单页面的跳转
要想实现以上功能必须知道两点,
4.1、通过传来的字母确定对应字母所在列表的位置
问题1: 如何匹配传来的字母参数
解决:通过ref,为每一个列表头绑定字母,this.$refs[参数][0]
这时候的refs是数组,必须带上index才可以取出值
问题2:单击字母容易确定参数,那滑动手势,如何确定自己的手指在哪个字母上
4.2、使用this.scroll.scrollToElement(element)实现类似于锚点的跳转
详情页:
重点:递归组件的使用
在组件中调用自己,一般应用场景为列表项,判断是否有下级列表,
问题:为什么会有递归组件?
在项目开发中,为了维护项目的可扩展性,我们不可以将一些列表的数据写死,而是应该根据ajax获取的后端数据来判定,是否继续生成下级列表,但是往往在
后端没有提供数据api时,前端人员是无法确定有几级列表的,这时候就需要使用
递归组件了。
其它:关于其它组件以及页面的工作都是比较基础的样式布局了,我们应该注重实现以下功能:
- 实现代码的可复用性、扩展性
- 项目性能的优化
实现代码的可复用性以及扩展性:
主要就是将公共逻辑代码抽离,实现难度不大,但是需要考虑的细节较多
项目性能的优化:
在此次的vue去哪儿网项目中,我们主要使用了keep-alive来实现页面的缓存,并且利用keep-alive提供的activated 和 deactivated生命周期 加上 ajax 来实现一个页面加载的性能最优化
代码运行性能优化:文件缓存、tree shaking 、懒加载和预加载