Vue移动端项目--瑞幸咖啡重构优化-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue移动端项目--瑞幸咖啡重构优化。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

来了客官，好久不见！

从年初开始，就有个想法，想着把之前做过的项目重新整理一下。毕竟今时不同往日，从现在的角度去看曾经做过的项目，倒是觉得有很多稚嫩的地方。毕竟无论做什么都是熟能生巧，由浅入深嘛。

瑞幸咖啡是之前做过的一个vue移动端项目，项目也是比较粗浅，结构比较混乱。之所以重构代码，一方面是对自己的一个总结，另一方面也是为了众多前端初学者行一个方便之举，能够更好地实战vue框架。

如果对这个项目不了解，可以点击这里Vue项目-手机app瑞幸咖啡详解（全网最细）从脚手架搭建到前后端数据交互，本次重构依旧采用vue2框架，只是接口采用json-server的形式模拟实现，功能基本能够复现。好了，废话不多说，下面就简单介绍一下本次重构内容！

一，项目结构

Vue移动端项目--瑞幸咖啡重构优化,项目,vue.js,重构,前端

public 这个就不用介绍了吧
src 开发目录
- src/assets 存放项目下的静态资源（图片，icon,字体文件等）
- src/components 项目下的公共组件
- src/hooks 存放公共请求处理函数（如获取用户收货地址）
- src/pages 项目页面组件
- src/router 存放路由（包括路由列表，路由守卫）
- src/store vueX目录
- src/utils 存放项目公用工具类（如存取userInfo）
App.vue 项目主组件
main.js 入口文件
db.json 存放json-server数据（很重要，用来模拟接口）
README.md 项目说明文件

其余文件可以不用关注，或者自行搜索了解

二，项目启动

step 1

npm install
or
yarn install

step 2

npm run server

step 3

npm run serve
or
yarn serve

三、账号登录

经过以上步骤，项目就能够成功启动，但是项目必须登录才能进入，本项目设置了三个账号，存放在项目文件中，读者可自行拉取代码体验，文章最后我会附上项目完整免费源码（是不是良心博主）。

Vue移动端项目--瑞幸咖啡重构优化,项目,vue.js,重构,前端
先别急，这里有必要作个说明，此处登录需要账号（也就是手机号）和验证码，验证码按照以上步骤获取即可，只有手机号合法且验证码正确方可登录成功!

四，重构说明

Vue移动端项目--瑞幸咖啡重构优化,项目,vue.js,重构,前端

本项目共分为上图五个模块以及登录模块。本次项目重构整合了所有页面组件，公共组件，静态资源，改用json-server模拟接口实现页面功能。在复现之前所有功能的前提下，优化了部分功能，如购物车、订单模块等，还新增了账户余额查询，订单评论功能。
对于之前的代码也作出了优化，删除或更改了冗余的代码块，提取公用代码块为工具类，对于路由守卫也作出了更改，对于页面访问的权限只有登录账户才能访问。
对于组件名，变量名等统一了规范，全部按照阿里前端规范修改，变量或函数名更加语义化，也都做了详细的代码注释，方便初学者更加容易理解。
此外还修改了部分代码或是css的bug，使得项目运行更加流畅。当然，json-server模拟接口可能并不尽人意，奈何我只是小小一个前端。况且，重点是在于对于vue框架的项目实战学习。