vue开发去哪儿网App的知识点和错误点整理

简介：vue开发去哪儿网App项目是跟着慕课网上面的教程进行学习、编码完成的。这篇文章主要记录的是-我在编码过程中运用的主要知识点和遇到的bug以及对bug的修复，目的是加深对vue基础知识的记忆和理解。
项目文件地址为https://gitee.com/zjinxiaoliang/Travel_GoWhere

一、主要知识点

1.字体图标的使用

（1）下载相应图标文件，并且将文件放在src/asset文件夹中（具体文件夹可以根据自己需要自己创建），我是在阿里巴巴图标矢量库下载的图标文件，地址如下：
https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
（2）在src/main.js文件中引入字体文件中的css文件（在src/main.js中引入相关文件，是因为在整个项目中可能不止一个组件运用到。如果只有一个组件用到，当然也可以在相应的组件中引入文件，下同）。

2.移动端样式的重置

（1）在src/main.js文件中引入移动端重置样式文件和解决1像素边框文件，下载地址如下(文件中注释可能会乱码，但是不影响)：
border.css
reset.css

3.vue-awesome-swiper

（1）运行npm install vue-awesome-swiper --save下载（当然这些依赖都可以用vue脚手架进行下载）
（2）在src/main.js引入相关的文件

• 引入swiper插件
  import vueAwesomeSwiper from ‘vue-awesome-swiper’
• 引入swiper样式
  import ‘swiper/dist/css/swiper.min.css’
• 全局使用
  Vue.use(vueAwesomeSwiper)
  （3）在相应的组件中使用

  
    
  
  




data () {
    return {
      swiperOptions: {
        pagination: '.swiper-pagination',//显示跟随图片滑动的圆点
        loop: true,// 是否循环
        autoplay: 3000,// 自动播放时间间隔 
        observeParents: true,
        observer: true
      }
    }
  }

4.组件间数据传递

（1）父->子
举例，下图中Home是父组件，Weekend是子组件

分析：
1-Home组件
2-Weekend组件
3-Home组件中引入Weekend组件
4-Home组件中使用Weekend组件，并且使用weekendList(命名根据自己需要)传值，因为weekendList是动态的因此需要加***
5-Weekend组件中用props接收传过来的值，并指明类型
6-接收过来之后就可以在组件使用这个值了

（2）子->父
举例：下图中City是父组件，Alphabet是子组件

分析：
1-City组件
2-Alphabet组件
3-点击字母表触发handleLetterClick事件
4-handleLetterClick方法就是触发$emit事件，并抛出参数5-引入组件6-使用组件，并给$emit事件绑定一个方法
7.方法中接收传过来的参数

（3）兄-兄
在这个项目中的兄弟组件是结合（1）（2）的方法来进行传值的，
即子->父->子

（4）非父子、非兄弟间传值

• 在这个项目中、将组件中共有的数据存储在vuex中，实现数据的共享
• 数据存储在state中、对数据的操作在mutations中、数据异步操作在actions中、想对数据进行操作但不想修改原数据在getter中
• 调用state中的数据有两种方式,例如在此项目中我们设置的city是共享数据
  • this.$store.state.city，如下图：![this.$store.state.city.png]7
  • 先在组件中引入mapState，然后在计算属性中使用…mapSate([‘city’]),之后我们就可以直接使用这个计算属性，如下图：
    

5.keep-alive和activated、exclude、include

（1）keep-alive
keepalive主要是缓存，当有些页面不需要来回收发包，1次就可以的时候。我们用keepalive标签
（2）activated
有的时候我们有的页面需要重新刷新请求包，而有的页面不需要。所以我们就需要利用钩子函数来解决
mounted只执行一次。而activated只要页面切换加载组件就会执行一次
（3）exclude（不缓存）、include（缓存）
可以在keep-alive标签中添加想缓存或不想缓存的组件（必须在相应的组件中设置name），
如下图所示：

6.递归组件

所谓递归组件就是组件自己调用自己，在这个项目的详情页面，有一个层级的列表展示，这里我们用到了递归组件。代码如下图所示：

一般我们从后台拿到的层级数据都是根据每一项是否有children来判断是否嵌入递归组件。

---

二、遇到的错误

1.Vue项目控制台 报sockjs.js?9be2:1606 GET http://192.168.43.226:8080/sockjs-node/info?t=1584966826465

网上找到的原因说是：sockjs-node是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。在项目运行以后，network会一直调用这个接口。如果没有使用，那么就一直会报这个异常。
解决方法
找到/node_modules/sockjs-client/dist/sockjs.js文件
在1606行，注释掉self.xhr.send(payload);这一行，然后就可以解决了

2.better-scroll刷新后才能滑动的解决方案，转自https://blog.csdn.net/xiexie16888/article/details/103838398

近期在写一个Vue移动端项目时 使用了better-scroll插件
但是页面初始化以后滑动事件失效，需要从新刷新页面才能启动功能，
这个问题困扰了我将近一天时间，在感觉解决无望时就真机测试了下 发现并没出现问题，遂又找了几个机型进行测试，发现并没有问题，
然后我又去better-scroll官网看了下他的demo 也会出现同样的问题！！ 合着只是新版谷歌与better-scroll自身的兼容问题，并不影响项目的正常运转，只是在谷歌进行移动端测试时才会出现罢了 …

3.better-scroll快速滑动，出现异常回弹，转自https://blog.csdn.net/sinat_28071063/article/details/106529255

原因：
better-scroll在IOS 13.4版本上快速滑动，回出现异常回弹效果。这是由于IOS版本导致的。
解决办法：
在BS初始化时，加上useTransition:false