Vue+Express全栈购物商城

时间 2019-11-08 标签 vue+express vue express 全栈购物商城

1、前言提纲

基于Vue和Express框架写的一个全栈购物商城，记录项目过程当中遇到的一些问题以及经验和技巧。css

2、历史版本

基于Vue-CLI2.0:点我查看
这个分支版本是一两年前的，基于Vue-CLI2.0写的，数据请求是Mock，纯前端的项目。html
基于 Vue-CLI3.0:点我查看
这个分支版本是基于Vue-CLI3.0的，将脚手架从2.0迁移升级到了3.0，遇到的一些问题和坑也都填完了~也是纯Web端Mock模拟数据的项目。前端
当前版本:点我查看
基于Vue-CLI3.0,前端用Vue全家桶，后端用Express+MongoDB+Redis，后台管理系统CMS是用的Vue-Element-Adminvue

3、详情

1.前端

在线预览:https://www.fancystore.cn

手机直接扫描二维码真机体验:ios

1.1 技术栈:

Vue全家桶(Vue-CLI3,Vue2.x)
Vue-Router(页面KeepAlive的处理)
Vuex(状态管理库，刷新保存状态)
Axios(二次封装配置的数据请求)
Less(CSS预处理)
I18n(国际化处理)
Vant(UI库,按需加载+rem)
SEO(预渲染)
Sentry(线上错误日志监控)
Travic(自动构建,持续部署)

1.2适配

项目代码px自动转换为rem，须要在main.js中引入amfe-flexible库git

Vant UI库也有REM单位，须要在vue.config.js中配置:
github

1.3 SEO

单页(SPA)SEO是一个痛点，目前有两种方式，一种是SSR,一种是预渲染(PrerenderSPAPlugin)。vue-router

这个项目是用预渲染(PrerenderSPAPlugin)+vue-meta-info这两个库来作SEO优化的。vuex

将rouer.js模式改成mode:history
下载安装PrerenderSPAPlugin
PrerenderSPAPlugin是Google的一个库，基于Chromium是获取数据，安装PrerenderSPAPlugin的时候会自动下载Chromium浏览器，国内npm安装Chromium会常常安装失败，建议用淘宝的cnpm安装vue-cli

npm install -g cnpm --registry=https://registry.npm.taobao.org
    cnpm install PrerenderSPAPlugin --save

在vue.config.js中引入PrerenderSPAPlugin，配置须要预渲染的路由。
下载安装 vue-meta-info
在main.js中引入vue-meta-info，在每一个页面配置meta信息，这样每一个单页路由都有不一样的title,理由爬虫引擎抓取重要内容，利于SEO。

预渲染前只有一个index.html,预渲染后最后打包出来的预渲染目录文件以下:

1.4 路由懒加载以及缓存keep-alive动的态判断

项目中会使用keep-alive会提升用户体验和网站的性能,若是想实现部分页面缓存，部分页面不须要缓存，能够在router.js里面的路由添加meta.keepalive在跟router-vier加入判断:

1.5 Vuex状态管理页面刷新失效问题

用Vuex管理全局的状态，会遇到刷新页面的时候全部的状态丢失或者重置，能够在App.vue的钩子函数添加代码，会在页面刷新的时候将Vuex存储到Storage中，刷新完成后又再从Storage取出来存到Vuex里面:

1.6 封装数据请求

封装Axios，添加Axios请求(request)和相应(response),统一处理错误信息或者登陆认证的消息,全部的数据请求都存放到api目录下，对应的页面方便后续的维护和管理。

1.7 打包构建优化vue.config.js

区分开发环境和生产环境
alias的方式直接指定目录。
CDN
生产环境中将一些共有库Vue,vuex,vue-router等库不打包到项目中，而是经过CDN的方式引入这些共有库，这样能够减小项目的大小，也能够借助CDN的优点，让网站加载更快。推荐一个强大的cdn库：[https://www.bootcdn.cn/](https://www.bootcdn.cn/)
生产环境压缩和出去console打印日志
生产环境开启gzip压缩
生产环境启用预渲染
生产环境分离css，外链CSS能够缓存

1.7 错误日志监控Sentry

集成Sentry开源日志监控系统，在官网注册获取key，在main.js中引入RavenVue并配置便可

1.8 自动构建和持续集成

Github自动构建和持续集成基于Travis

登陆Travis选择须要持续集成的项目。
在.travis.yml写上相应的config,服务器配置ssh_key，
每次代码push到指定分支(好比master)的时候，Travis会自动执行项目上的.travis.yml文件，开始自动构建，构建成功经过scp密令传送到服务器，完成自动部署的功能。
每次须要发版，只须要push代码，而后去喝杯咖啡，回来就已经构建发布完成，解放劳动力

1.9 代码自动格式化优化

团队合做的时候，每一个成员用的编辑器不一样，缩进格式也不一样，这样合并代码的时候会出现各类意外的状况，团队统一编辑器和编辑器不太现实，由于每一个人的写代码习惯和风格不一致。能够借助husky 和 link-stage，每次commit的时候都会安装配置的规则格式化代码，参考文章:http://www.noobyard.com/article/p-qnjqqnea-cy.html