这是我自己写的一个电商项目开发流程，欢迎各位前来补充交流！

项目介绍

我的项目叫✖✖✖✖，是B2C模式，也就是商家对客户，是采用vue2加vant进行开发的一个移动端线上购物商城，类似于京东商城，天猫商城。

不懂得ABC模式的小伙伴可以去百度下！

项目具体用于线上购物，主要针对于家有爱宠的人来进行的一个购物平台，用户在注册后进行登录，可以在商城进行购买，而商家提供一个产品和货物的发送，平台为用户和商家的利益提供并进行一个安全保障，保障每一个人的权益。

项目页面介绍

项目分为首页，详情页，购物车，搜索页，订单，我的。

项目开发流程

首页介绍：

首页是用来用户进行浏览并挑选，在component我封装了一个tabbar组件，因为我们在点击每一个页面时，底部都会有一个导航栏，封装组件的好处就是我可以不用再去重复的去写这个导航栏，直接调用就可以，大大提高了我的开发效率，在以后修改，或者优化项目时也比较方便，在用户进入app时，首先会看到的是我们的首页，这里会有商家的商品，而这个页面的渲染用到了axios，首先我会在我的根目录下创建一个文件夹，作为我的网络请求模块，并在其文件夹下新建http.js，api.js，request.js，http.js用来封装我们的axios，api.js用来统一管理我们的接口url。在reques.js中我会添加请求拦截和响应拦截，我会给请求头添加token字段，还有loading动画的开启。在响应拦截中，可以做一些loading动画的关闭，还有可以根据后端返回的状态码，做一些检验token是否有效或者过期的操作。在用户点击商品时，我们还通过Token来判断用户是否登录，如果没有登陆的话，我们用路由守卫来进行拦截，并弹出注册和登录页面，让用户进行登录或者注册，在用户登陆成功后返回我们商品的详情页。

搜索页：

在首页的顶部有我们的搜索input框，在用户点击时会跳转到我们的搜索框，直接跳转会不美观，我们可以去Animate.css | A cross-browser library of CSS animations.的官网去看一下跳转的css样式，并优化到我们的项目中，提高了美观度并增加了用户的体验，在进入搜索页后，可以看到我们的input搜索框，假设在用户网络比较慢的情况下，他在不停点击搜索框，这样比较耗费我们的资源，这时候给我们的搜索框加上防抖处理，防抖就是在持续触发的事件中，防止触发，当停止触发事件后执行最后一次触发。可以有效的减少请求的次数，节约请求资源。还可以给搜索框加入模糊搜索和历史记录模块，具体看你们项目经理的要求。

详情页：

详情页的作用主要用于客户浏览商品详情并加入购物车或者立即下单功能的实现，还可以实现与我们客服进行聊天，我们通过后端的事件名称来监听用户上线的响应，向建立该连接的客户端广播，与链接到这个对象的客户端进行单独通信，用户告诉在告诉服务器我是谁时，客服就会在我发送消息后主动和我说话，进行一个对商品的详细了解，这些功能都是基于用户在登陆的情况下，如果没有登录让他进行登录，在用户点击加入购物车时跳转到我们的购物车页面，购物车实现了，全选，反选，以及用户对商品的一共加减以及价钱的计算，在用户进行下单时可以唤醒微信或者支付宝对商品进行付款，用户付款成功进入订单页面，失败返回购物车页面，无论用户支付成功还是失败，都会跳转回来，或者跳转到另一个指定页面。

项目打包优化上线：

在项目完成后我们在对其进行优化，删除不必要的包，引入cdn。进行代码优化减小体积，最后上线项目。