vue2.0打造美圖官網（移動端）

看着各位大神的vue項目泉涌而出,本階段正在學習Vue的小小白也打算親自操起鍵盤來感覺一把Vue世界的美好~~

線上體驗

在線demo（ps:記得切換到移動端體驗哦~）
github源碼

技術棧

• vue2.0

• vue-router spa開發

• vuex 專爲 Vue.js 應用程序開發的狀態管理模式,集中式存儲管理應用的全部組件的狀態

• axios 一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端

• mint-ui 基於vue.js的移動端組件庫 幫助快速搭建頁面

• easy-mock 先後端分離，提供數據接口

• html5 css3

頁面預覽

主要實現功能

商品信息展現

• 輪播圖

• mint-ui navbar 切換商品信息，產品參數

• Toast 用戶提醒信息

• 主頁面展現

手機預定

預定功能的實現主要在state中添加一個預定商品數組，當預定了商品後就使用數組的push方法將商品加入預定數組中，而後再個人預定頁面就能夠查看你預定的商品，同時你也能夠取消預定，這就更簡單了，直接將預定數組清空，固然這隻只有一條預定消息的狀況下，若是有多條記錄，就能夠藉助splice方法進行數組切割。詳細實現能夠參考代碼。

購物車

（1）加入購物車
首先要作出判斷，即將加入購物車的商品是否已經存在購物車中，此時會出現兩種狀況：

1. 加入的商品在購物車中已經存在， 該商品已經存在購物車中,此時商品數量+1便可。

2. 商品不在購物車,將新加入的商品信息push進cartList
   （2）刪除商品

根據根據選中即將刪除商品的id在cartList中遍歷出該商品並給予刪除,由於我在state裏是一個數組暫存購物車中的商品，
因此可使用數組的splice方法將指定下標的某個商品刪除,即 cartList.splice(index, 1)
（3）商品支付
根據用戶選中前往支付的商品動態的顯示須要支付的總金額,此時購物車中的商品如同一個個複選按鈕，可選可不選，可單選可多選,使用戶的購物體驗更好,這些共享狀態之間相互切換，來及時驅動界面的渲染 。
（4）用戶登陸狀態判斷
在提交訂單和當即購買時,須要對用戶的登陸狀態進行判斷，
經過return this.$store.state.login 來獲取登陸狀態 。
（5 ) 用戶收貨地址生成
提交訂單時 若用戶未生成收貨地址 前往設置收貨地址，
此處我借用localstorage來存儲收貨地址信息，當用戶再次登陸時,則不須要再次設置收貨地址。
（6）生成訂單
用戶選中商品後生成相應訂單，
commit mutations ['CREATE_ORDER']
（7）查看訂單
支付操做完成後，在登陸的狀況下用戶可在我的中心查看個人訂單。
（8）購物車更新
已經支付生成訂單的商品從購物車中「消失」,已經加入購物車但還未支付的商品繼續保留其原有的狀態，這些狀態間的切換，以及組件的更新都仰仗Vuex的響應式狀態存儲。

小結

1. 採用rem 自適應佈局，移動端必備,但使用時需注意rem是相對於根元素,建議項目初期就嚴格使用rem進行佈局，會減小後期的適配工做

2. 初學vue,使用methods和computed可能會存在必定誤區，首先須要明白computed是計算屬性，實時響應數據的更新，而methods是方法，必須有必定條件去觸發，可能這樣說上去仍是不夠清晰明瞭，那麼就請仔細閱讀下面這段話： 計算屬性是基於它的依賴緩存。計算屬性只有在它的相關依賴發生改變時纔會從新取值。這就意味着只要 message 沒有發生改變， 屢次訪問reversedMessage 計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。每當從新渲染的時候，method 調用總會執行函數。 也就是說只要不是直接使用瀏覽器刷新頁面，當咱們改變數據、DOM操做等引發頁面從新渲染時，計算屬性會直接使用緩存，不會從新執行函數。 適合那些計算量很大且改變頻率很低的屬性；若是使用methods，每次頁面從新渲染時都會從新執行methods函數。

3. v-if 和 v-show 的使用,二者都是動態的顯示DOM元素,但二者存在區別,性能消耗也不一樣，如果頻繁的切換狀態建議使用v-show

4. vuex使用： - Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化, 那麼相應的組件也會相應地獲得高效更新。 - 咱們不能直接改變 store 中的狀態。改變 store 中的狀態的惟一途徑就是顯式地提交(commit) mutations。
   關於Vuex你想了解更多？一塊兒去看文檔吧（https://vuex.vuejs.org/zh-cn/） 這樣你離大牛又進了一步~

5. 須要繼續完善的模塊：

• 搜索功能 如今已經能夠搜索了，但還未實現先後端同構，主要是依賴easy-mock 構造假數據，而後根據輸入的關鍵字匹配，axios異步請求數據，再將數據渲染到頁面上

• 手機預定 這個功能也已經初步實現，但還略顯粗糙，會進一步完善~ 畢竟學習永遠沒有盡頭，就像喝了脈動同樣，根本停不下來~~~
  最後

這是我的的第一個Vue項目，略顯粗糙~ 接下來會不斷完善的。
歡迎你們提出issue，共同窗習。

Build Setup

bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.