vue2 构建一个旅游类WebApp

crazymeercat 发布于1年前 阅读231次
0 条评论

前言

从看了慕课上面黄易老师的饿了么课程后,总感觉学了VUE之后要做点什么,趁着热情兴趣还在,自己也用VUE全家桶写了一个旅游类的APP,为什么选择做旅游类的呢??呵呵,我不会告诉你虽然很多地方都没去,但是可以意淫啊啊啊啊。

地址

github地址
喜欢的话 star一下,举手之劳是美德 ,哈哈。如有问题 欢迎issue

项目描述

前端部分

  • 实现了轮播图,自己手写的轮播图组件
  • 登录页面 用了LocalStorage 记录登录状态。
  • 精选页面 用了滚动插件 黄易老师的组件 better-scroll,其中的坑下面在介绍。
  • 精选商品页面,收藏 和 赞 就用到了vuex(本来不想用,用localStorage 也能实现,但是用了VUE 给点面子总的用用vuex吧。)。然后,星星组件,右边底部的动画,以及滚动菜单,评论组件。
  • 目的地页面,左边滚动菜单对应右边的选项,并添加样式。
  • 目的地详情页面,实现的横向滚动。
  • 中间的添加页面,里面的弹窗用了slot插槽,雷达按钮动画。
  • 我的页面,收藏页面的数据对应精选里面的收藏按钮。

后端部分

  • 用express 写的路由接口
  • 数据方面,由于没找想要的api,只能自己写json 造数据,写数据结构想了又想,还一个一个的在网上copy图片和文字,心好累,还好兴趣支撑着。

待开发功能

  • 购物车页面。
  • 搜索目的地页面。
  • 我的行程的编辑然后在 我的 路由的place 显示
  • 组件的优化。

详情

  • 登录展示
  • 精选页面1
  • 精选页面2
  • 目的地页面

  • 我的行程
  • 组件
  • 路由
  • store

技术栈

  • VUEX,Vue-Router,Vue-Resource,slot,es6,less。
  • 移动端布局 felx(神器),各种花式用flex,横向自定义宽度居中,纵向sticky-footer布局,两栏布局,左边固定,右边适应。get到一个技巧,padding-top:100%,实现图片的加载。移动端1px的问题。

痛点

  • 在实现精选详情页里面的收藏 和赞 的功能中,在当前页面点了赞和收藏 返回之后在下个页面中显示上个页面的状态,本来不想用vuex,不过用起来真的爽。如下

解决方法在精选页面点击之前做判断,如下

  • better-scroll 的坑,由于better-scroll是操作DOM的,把要执行的滚动函数尽可能的放在 updated钩子函数中,并且要放在$this.nextTick()中。它的滚动原理是要子元素的高度要大于父元素的高度,所以才会产生滚动,故CSS的代码要写好 如

        parent{
        position: absolute;
        top: 64px;
        bottom: 50px;
        z-index: 70;
        overflow: hidden}

呵呵呵,你以为这就算爬坑了吗,太简单了。当你的图片或者文字过多的时候,调试器上面虽然可以看到 DOM已经加载,better-scroll已经渲染,但是为什么一进页面滚动不了?要刷新之后才能继续滚动??试试在滚动函数里面加一个延迟吧。

  • 关于钩子函数 mounted 和updated 的坑,你趟过吗?mounted钩子函数 不表示组件已在document中!!!!!,也就有些时候一些报错说,this.$refs.element.style.width ,style 不能修改被修改。试试把他放在updated里面执行吧。

总结

  • 组件间通信,我的原则是用props,eventBus能解决的 就不要用vuex。但是当props,eventBus不能解决或者比较繁琐的时候,那就毫不犹豫的用vuex吧。
  • 组件间传值,当你想要在子组件获得的父组件的属性 中添加一个值 并且和父组件的属性关联的时候,那就用vue.set(this.select,count,1)吧,很方便有用。
  • 未完成的会一直更新,再接再厉。

查看原文: vue2 构建一个旅游类WebApp

  • yellowwolf
  • silverfish
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。