113

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)

 7 years ago
source link: https://juejin.im/post/5a5349b9f265da3e290c0d12
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

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

2018年01月09日 03:21 ·  阅读 5786
160d5877d1923662~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp

在线地址:fancy.czero.cn

手机扫描二维码查看:

164d1c98a029c222~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp

点击下载安卓apk安装包

源码地址:github.com/czero1995/f…

项目主架构

160d562efa48d77c~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp
  • vue-cli (vue+webpack脚手架)
  • vue-router(路由跳转)
  • vuex(状态管理)
  • axios(数据请求)
  • mock.js(模拟后台数据)
  • vue-touch(手势判断)
  • fastclick(解决移动端浏览器 300 毫秒点击延迟问题)
  • vue-lazyload(图片懒加载)
  • swiper(轮播)

设计布局:

  • HTML5
  • 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里面.

媲美原生的页面前进和后退的动画实现:

160d563c011aa615~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp
  • 指定transition:name
160d5651095fe0fb~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp
  • 在data中声明默认的进出动画
160d5654c843026e~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp
  • 在mounted()数据渲染初始化完成之后进行判断
160d5659218ecb69~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp
  • 拿到vuex的状态值
160d56747251259a~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp
  • 然后进行判断
160d565df58b615b~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp
  • 最后将当前的组件名字传给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 [email protected]:/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复制代码

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK