瑞昇卡惠h5开发(vue)

千呼万唤始出来，犹抱琵琶半遮面。一直在做小程序，现终于做了一个vue项目，再也不是自己练习的小demo了。激动的心，颤抖的手，怀着忐忑的心情，创造不一样的bug。

---

一 、 项目描述

此项目属于微信公众号项目中嵌入的h5页面开发。项目很小，前端页面20多个。开发周期大约两周。从项目启动到上线交付，历时23天左右。主要分两部分逻辑：

1.买卡业务： 有三种卡供用户购买，用户在此项目下单后，根据提示自行打款支付。卡交易方式有线上邮寄和线下自提两种。线上邮寄时，微信或银行卡转账后，到订单列表页面自行上传支付凭证。经后台运营人员审核后，进行卡片邮寄。

2.卖卡业务：有四种卡供选择，可选择面额或自定义出售面额。卡交易方式有线上邮寄、线下自提（自行前往指定的线下地点交易）和线上提交三种。都需要填写用户自己的收款账户信息。其中，线上邮寄，需要填写物流订单信息。线上提交订单时，必须上传自己所出售的卡的信息图片。

二、项目开发过程

项目运用vue-cli3脚手架进行SPA开发。项目目录结构如图：

图一      项目结构目录

采用vue2+vant进行开发，用起来还挺顺畅。没有很奇怪的组件不兼容和适配问题。有几点基本需要记录一下：

①移动端的适配采用：lib-flexible + postcss-px2rem （还需安装px2rem-loader），在vue.config.js 中设置750设计稿的基准值。见图2。

②CSS样式书写上采用了Less。网络请求采用axios。

③页面标题采用插件vue-wechat-title，应对页面刷新标题消失问题。页面标题可在每个路由注册的时候添加，并在全局前置守卫router.beforeEach((to,from,next)=>{   //.....      next()   })函数中书写标题。

④本地代理和打包路径配置，如图三。

⑤开发过程中，喜欢到处写console, 后期打包后，又不想显示console。使用包babel-plugin-transform-remove-console 。并在babel.config.js 中进行配置。如图四。参考链接：Vue-cli3.0怎么配置在打包时候去掉console打印的信息

⑥用了一点点vuex。在用户订单确认页面地址选择那块使用，仓库存储了用户选择的地址信息。使得用户选择地址后，返回订单确认页面时候会自动从仓库中加载用户的选择的地址数据。vuex用起来挺舒服，写起来有些麻烦，还有页面一刷新，仓库数据全部丢失问题。当然这些都是使用vuex必须面对的问题。以后遇到这种项目规格不大，就用本地存储存数据会方便很多。

⑦ 对于vue，我还不清晰整个项目运行体系和配置。有一份基本的vue-cli3的配置参考。 参考链接：关于 Vue cli 3的配置 vue.config.js 和使用

⑧对于dpr问题，我始终徘徊于略懂和不懂之间，先记录一下。好像不懂也没影响啥，可能就用户体验细微的差了点，页面的适配不那么完美。但是它却又这么说。参考链接：真的，移动端尺寸自适应与dpr无关

三、总结

整个项目开发过程中技术上没有太多的难点，逻辑上理清楚了也是很容易的。但开发过程中，还是常有写着写着代码就懵掉的情况。我归因于买卡和卖卡业务有很多公用组件，逻辑上相似却又不同。买卡卖卡两部分又拥有各自的交易方式，代码书写过程中很容易搞混。每次找到自己写出来的bug，都如梦初醒，怀疑自己之前是不是在梦里闭着眼睛写的。最痛苦的莫过于，我将买卡的一套逻辑写下来，感觉还好。等开始写卖卡的逻辑，在那些公用组件中，常常把买卡的代码又改的运行不通了。到处飘红，一片大好河山，欲哭无泪，只能硬着头皮，再次把买卡卖卡的逻辑通通梳理一遍，字段一个个确认，确保不会再拆了东墙补西墙。幸好，终究还是从泥沼中爬出来了，革命胜利，红旗飘飘，头发还在。

图片区：

图2     postcss-px2rem 配置

图3   本地代理和打包路径配置

图4   生产环境console清除