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)在相应的组件中使用
<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是子组件
父-子.png
分析:
1-Home组件
2-Weekend组件
3-Home组件中引入Weekend组件
4-Home组件中使用Weekend组件,并且使用weekendList(命名根据自己需要)传值,因为weekendList是动态的因此需要加**😗*
5-Weekend组件中用props接收传过来的值,并指明类型
6-接收过来之后就可以在组件使用这个值了

(2)子->父
举例:下图中City是父组件,Alphabet是子组件
子-父.png
分析
1-City组件
2-Alphabet组件
3-点击字母表触发handleLetterClick事件
4-handleLetterClick方法就是触发 e m i t 事 件 , 并 抛 出 参 数 5 − 引 入 组 件 6 − 使 用 组 件 , 并 给 emit事件,并抛出参数 5-引入组件 6-使用组件,并给 emit56使emit事件绑定一个方法
7.方法中接收传过来的参数

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

(4)非父子、非兄弟间传值

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

5.keep-alive和activated、exclude、include

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

6.递归组件

所谓递归组件就是组件自己调用自己,在这个项目的详情页面,有一个层级的列表展示,这里我们用到了递归组件。代码如下图所示:
递归组件.png
一般我们从后台拿到的层级数据都是根据每一项是否有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
useTransition

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页