Vue全家桶商城全站升级之引入HTTPS,PWA,错误监控,持续构建。

在线地址: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作状态管理的时候，当用户刷新页面，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)和引入骨架屏

参考文章:

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

https://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