Vue全家桶商城全站升級之引入HTTPS,PWA,錯誤監控,持續構建。

在線地址:fancy.czero.cn

手機掃描二維碼查看:

點擊下載安卓apk安裝包

源碼地址: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)和引入骨架屏

參考文章:

github.com/czero1995/v…

zhuanlan.zhihu.com/p/37408373

持續集成服務 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
複製代碼