简介：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插件
- vueAwesomeSwiper from 'vue-awesome-swiper'
- 引入swiper样式
- 'swiper/dist/css/swiper.min.css'
- 全局使用
Vue.use(vueAwesomeSwiper)
（3）在相应的组件中使用
<swiper :options="swiperOptions">
<swiper-slide>
<img src="l" alt="">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
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，如下图：
- 先在组件中引入mapState，然后在计算属性中使用...mapSate(['city']),之后我们就可以直接使用这个计算属性，如下图：
- this.$store.state.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