简介: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