vue去哪儿网项目知识点总结

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时，前端人员是无法确定有几级列表的，这时候就需要使用
                                      递归组件了。

 

 

其它：关于其它组件以及页面的工作都是比较基础的样式布局了，我们应该注重实现以下功能：

1. 实现代码的可复用性、扩展性
2.  项目性能的优化

 

                    实现代码的可复用性以及扩展性：

                                  主要就是将公共逻辑代码抽离，实现难度不大，但是需要考虑的细节较多

 

                    项目性能的优化：

                                  在此次的vue去哪儿网项目中，我们主要使用了keep-alive来实现页面的缓存，并且利用keep-alive提供的activated 和 deactivated生命周期 加上 ajax 来实现一个页面加载的性能最优化

                                   代码运行性能优化：文件缓存、tree shaking 、懒加载和预加载