vue2 構建一個旅遊類WebApp

前言

從看了慕課上面黃易老師的餓了麼課程後，總感受學了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)吧，很方便有用。
• 未完成的會一直更新，再接再礪。