摘要：免費(fèi)升級(jí)到升級(jí)到后，服務(wù)器可以開啟版本，對(duì)比性能和緩存各方面要更好，還有其他新特性，可以啟動(dòng)功能，更好的進(jìn)行離線緩存，更好的離線體驗(yàn)。

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

手機(jī)掃描二維碼查看:

點(diǎn)擊下載安卓apk安裝包

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

vue-cli (vue+webpack腳手架)

vue-router(路由跳轉(zhuǎn))

vuex(狀態(tài)管理)

axios(數(shù)據(jù)請(qǐng)求)

mock.js(模擬后臺(tái)數(shù)據(jù))

vue-touch(手勢(shì)判斷)

fastclick(解決移動(dòng)端瀏覽器 300 毫秒點(diǎn)擊延遲問題)

vue-lazyload(圖片懶加載)

swiper(輪播)

HTML5

CSS3

Less

rem(阿里用的那套rem算法)

Flex(彈性布局)

vue-touch(用于實(shí)現(xiàn)購(gòu)物車左滑刪除功能)

*動(dòng)畫（vue原生transition實(shí)現(xiàn)原生app的效果）

Mock(模擬后臺(tái)數(shù)據(jù))

Axios(請(qǐng)求數(shù)據(jù))

vue(數(shù)據(jù)渲染,各個(gè)組件間的數(shù)值傳遞)

vue-router(組件間的路由跳轉(zhuǎn))

vuex(全局狀態(tài)的管理)

vConsole(在移動(dòng)端查看調(diào)試器)

騰訊智圖(壓縮圖片，減少圖片的體積)

vue-lazyload(圖片懶加載，緩解加載數(shù)據(jù),提高網(wǎng)頁(yè)性能)

fastclick(解決移動(dòng)端300ms延遲，提高頁(yè)面交互流暢度)

vue-rouer(路由懶加載,分離app的js為多個(gè)js文件，到對(duì)應(yīng)的頁(yè)面再執(zhí)行對(duì)應(yīng)的js)

webpack(config/index.js文件內(nèi)的productionSourceMap改為false,這樣打包出來(lái)的文件可以沒有.map結(jié)尾的js文件，且文件體積減少至少一半)

使用Vuex做狀態(tài)管理的時(shí)候，當(dāng)用戶刷新頁(yè)面，Vuex里面的狀態(tài)會(huì)全部丟失，從而引起程序的一場(chǎng)。解決思路是在creared()鉤子函數(shù)里面添加以下方法:

created(){
   console.log("頁(yè)面執(zhí)行刷新時(shí)，保存Vuex的狀態(tài)到LocalStorage")
    //在頁(yè)面加載時(shí)讀取localStorage里的狀態(tài)信息
    localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));
    
    //在頁(yè)面刷新時(shí)將vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload",()=>{
        localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
    })
  }  

上面代碼的原理是，當(dāng)頁(yè)面刷新時(shí)，會(huì)將當(dāng)前Vuex的狀態(tài)存儲(chǔ)到LocalStorage里面，刷新成功，再?gòu)腖ocalStorage賦值到Vuex里面.

指定transition:name

在data中聲明默認(rèn)的進(jìn)出動(dòng)畫

在mounted()數(shù)據(jù)渲染初始化完成之后進(jìn)行判斷

拿到vuex的狀態(tài)值

然后進(jìn)行判斷

最后將當(dāng)前的組件名字傳給vuex,實(shí)現(xiàn)不同的組件進(jìn)去就有不同的切換動(dòng)畫。

.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中設(shè)置好刪除按鈕的偏移量

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

滑動(dòng)的時(shí)候觸發(fā)select樣式，進(jìn)行綁定

讓當(dāng)前的列表項(xiàng)==購(gòu)物車的列表，樣式會(huì)被激活，出現(xiàn)左滑刪除

注意頁(yè)面的盒子使用盒子之后會(huì)和原生頁(yè)面出現(xiàn)沖突，導(dǎo)致滑動(dòng)不流暢
因此，需要在main.js指定默認(rèn)的滑動(dòng)方式為橫向滑動(dòng)觸發(fā)

也是使用的v-touch組件，實(shí)現(xiàn)方式和組件切換類似。
我給每個(gè)訂單狀態(tài)的組件一個(gè)不同的數(shù)字，根據(jù)這個(gè)數(shù)字，判斷組件是左滑動(dòng)的動(dòng)畫還是又滑動(dòng)的動(dòng)畫

參考文章:

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

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

利用Travis CI，監(jiān)聽Github項(xiàng)目master，一旦檢測(cè)到master有代碼變動(dòng)，自動(dòng)執(zhí)行腳本，并把編譯打包完成的項(xiàng)目自動(dòng)發(fā)送部署到服務(wù)器，不用再像以前一樣，需要ssh登錄到服務(wù)器，再執(zhí)行g(shù)it 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 [email protected]:/var/www/html/fancy
- 

遇到了很多的坑，失敗了無(wú)數(shù)次，終于知道問題所在:

sentry是國(guó)外開源的錯(cuò)誤監(jiān)控庫(kù)，有線上環(huán)境，也可以部署到自己的服務(wù)器，可以跟蹤錯(cuò)誤出現(xiàn)的步驟和錯(cuò)誤的詳細(xì)信息，方便開發(fā)人員進(jìn)行快速定位。

`升級(jí)到https后，服務(wù)器可以開啟http2.0版本，對(duì)比http1.x性能和緩存各方面要更好，還有其他新特性，
可以啟動(dòng)service work功能，更好的進(jìn)行離線緩存，更好的離線體驗(yàn)。
HTTPS證書可以免費(fèi)申請(qǐng)，阿里云跟騰訊云都可以申請(qǐng)，按照文檔指示進(jìn)行申請(qǐng)下載，然后將下載的證書上傳到服務(wù)器，配置服務(wù)器的內(nèi)容，就可以開啟https、http2.0、service work等功能了。
`

#克隆項(xiàng)目
git clone https://github.com/czero1995/fancy-store.git

# 安裝依賴
npm install

# DLL構(gòu)建庫(kù)(提高打包和編譯的速度)
npm run dll

# 本地開發(fā)環(huán)境 訪問http://localhost:8080
npm run dev

# 構(gòu)建生產(chǎn)
npm run build