線上地址:fancy.czero.cn
手機掃描二維碼檢視:
原始碼地址:github.com/czero1995/f…
專案主架構
使用的庫
- vue-cli (vue+webpack腳手架)
- vue-router(路由跳轉)
- vuex(狀態管理)
- axios(資料請求)
- mock.js(模擬後臺資料)
- vue-touch(手勢判斷)
- fastclick(解決移動端瀏覽器 300 毫秒點選延遲問題)
- vue-lazyload(圖片懶載入)
- swiper(輪播)
設計佈局:
- HTML5
- CSS3
- Less
- rem(阿里用的那套rem演算法)
- Flex(彈性佈局)
- vue-touch(用於實現購物車左滑刪除功能) *動畫（vue原生transition實現原生app的效果）
資料請求：
- Mock(模擬後臺資料)
- Axios(請求資料)
邏輯互動：
- vue(資料渲染,各個元件間的數值傳遞)
- vue-router(元件間的路由跳轉)
- vuex(全域性狀態的管理)
除錯
- vConsole(在移動端檢視偵錯程式)
優化方案:
- 騰訊智圖(壓縮圖片，減少圖片的體積)
- vue-lazyload(圖片懶載入，緩解載入資料,提高網頁效能)
- fastclick(解決移動端300ms延遲，提高頁面互動流暢度)
- vue-rouer(路由懶載入,分離app的js為多個js檔案，到對應的頁面再執行對應的js)
- webpack(config/index.js檔案內的productionSourceMap改為false,這樣打包出來的檔案可以沒有.map結尾的js檔案，且檔案體積減少至少一半)
Vuex重新整理儲存狀態
使用Vuex做狀態管理的時候，當使用者重新整理頁面，Vuex裡面的狀態會全部丟失，從而引起程式的一場。解決思路是在creared()鉤子函式裡面新增以下方法:
created(){
console.log('頁面執行重新整理時，儲存Vuex的狀態到LocalStorage')
//在頁面載入時讀取localStorage裡的狀態資訊
localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));
//在頁面重新整理時將vuex裡的資訊儲存到localStorage裡
window.addEventListener("beforeunload",()=>{
localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
})
}
複製程式碼上面程式碼的原理是，當頁面重新整理時，會將當前Vuex的狀態儲存到LocalStorage裡面，重新整理成功，再從LocalStorage賦值到Vuex裡面.
實現細節
媲美原生的頁面前進和後退的動畫實現:
- 指定transition:name
- 在data中宣告預設的進出動畫
- 在mounted()資料渲染初始化完成之後進行判斷
- 拿到vuex的狀態值
- 然後進行判斷
- 最後將當前的元件名字傳給vuex,實現不同的元件進去就有不同的切換動畫。
下一頁動畫
.slide-go-enter-active,
.slide-go-leave-active {
transition: all .5s;
opacity: .8;
}
.slide-go-enter,
.slide-go-leave-to {
transition: all .5s;
transform: translate3d(100%, 0, 0);
opacity: .8;
}
複製程式碼返回上一頁動畫
.slide-back-enter-active,
.slide-back-leave-active {
transition: all .5s;
}
.slide-back-enter,
.slide-back-leave-to {
transition: all .5s;
transform: translate3d(-100%, 0, 0);
}
複製程式碼購物車左滑刪除
v-touch
在css中設定好刪除按鈕的偏移量
-webkit-transform: translate(-12%, 0);
-webkit-transition: all 0.3s linear;
複製程式碼左右滑方法
滑動的時候觸發select樣式，進行繫結
讓當前的列表項==購物車的列表，樣式會被啟用，出現左滑刪除
注意頁面的盒子使用盒子之後會和原生頁面出現衝突，導致滑動不流暢
因此，需要在main.js指定預設的滑動方式為橫向滑動觸發
複製程式碼訂單頁面，點選頂部導航和左右滑動進行元件的切換以及動畫樣式的判斷
也是使用的v-touch元件，實現方式和元件切換類似。 我給每個訂單狀態的元件一個不同的數字，根據這個數字，判斷元件是左滑動的動畫還是又滑動的動畫
Vue-cli開啟PWA(Service Worker)和引入骨架屏
參考文章:
持續整合服務 Travis CI
利用Travis CI，監聽Github專案master，一旦檢測到master有程式碼變動，自動執行指令碼，並把編譯打包完成的專案自動傳送部署到伺服器，不用再像以前一樣，需要ssh登入到伺服器，再執行git pull操作。 本地新增.travis.yml
language: node_js
node_js:
- 8
branchs:
only:
- master
before_install:
- openssl aes-256-cbc -K $encrypted_87bf11d507f0_key -iv $encrypted_87bf11d507f0_iv
-in id_rsa.enc -out ~/.ssh/id_rsa -d
- chmod 600 ~/.ssh/id_rsa
- echo -e "Host 47.98.240.154\n\tStrictHostKeyChecking no\n" >> ~/.ssh/config
script:
- npm install cnpm --registry=https://registry.npm.taobao.org
- cnpm install
- npm run build
- scp -r dist root@47.98.240.154:/var/www/html/fancy
-
複製程式碼遇到了很多的坑，失敗了無數次，終於知道問題所在:
生產環境錯誤監控
sentry是國外開源的錯誤監控庫，有線上環境，也可以部署到自己的伺服器，可以跟蹤錯誤出現的步驟和錯誤的詳細資訊，方便開發人員進行快速定位。
免費升級到HTTPS
升級到https後，伺服器可以開啟http2.0版本，對比http1.x效能和快取各方面要更好，還有其他新特性， 可以啟動service work功能，更好的進行離線快取，更好的離線體驗。 HTTPS證書可以免費申請，阿里雲跟騰訊雲都可以申請，按照文件指示進行申請下載，然後將下載的證書上傳到伺服器，配置伺服器的內容，就可以開啟https、http2.0、service work等功能了。
專案程式碼已經都做好註釋，可以直接檢視原始碼，點選這裡
使用說明
#克隆專案
git clone https://github.com/czero1995/fancy-store.git
# 安裝依賴
npm install
# DLL構建庫(提高打包和編譯的速度)
npm run dll
# 本地開發環境 訪問http://localhost:8080
npm run dev
# 構建生產
npm run build
複製程式碼