摘要：免費升級到升級到后，服務器可以開啟版本，對比性能和緩存各方面要更好，還有其他新特性，可以啟動功能，更好的進行離線緩存，更好的離線體驗。

在線地址:https://fancy.czero.cn

手機掃描二維碼查看:

點擊下載安卓apk安裝包

源碼地址:https://github.com/czero1995/fancy-store

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里面的狀態會全部丟失，從而引起程序的一場。解決思路是在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);
}

在css中設置好刪除按鈕的偏移量

-webkit-transform: translate(-12%, 0);
-webkit-transition: all 0.3s linear;

滑動的時候觸發select樣式，進行綁定

讓當前的列表項==購物車的列表，樣式會被激活，出現左滑刪除

注意頁面的盒子使用盒子之后會和原生頁面出現沖突，導致滑動不流暢
因此，需要在main.js指定默認的滑動方式為橫向滑動觸發

也是使用的v-touch組件，實現方式和組件切換類似。
我給每個訂單狀態的組件一個不同的數字，根據這個數字，判斷組件是左滑動的動畫還是又滑動的動畫

參考文章:

https://github.com/czero1995/vue-pwa-skeleton

https://zhuanlan.zhihu.com/p/37408373

利用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
	StrictHostKeyChecking no
" >> ~/.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后，服務器可以開啟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