来了客官,好久不见!
从年初开始,就有个想法,想着把之前做过的项目重新整理一下。毕竟今时不同往日,从现在的角度去看曾经做过的项目,倒是觉得有很多稚嫩的地方。毕竟无论做什么都是熟能生巧,由浅入深嘛。
瑞幸咖啡是之前做过的一个vue移动端项目,项目也是比较粗浅,结构比较混乱。之所以重构代码,一方面是对自己的一个总结,另一方面也是为了众多前端初学者行一个方便之举,能够更好地实战vue框架。
如果对这个项目不了解,可以点击这里Vue项目-手机app瑞幸咖啡详解(全网最细) 从脚手架搭建到前后端数据交互,本次重构依旧采用vue2框架,只是接口采用json-server的形式模拟实现,功能基本能够复现。好了,废话不多说,下面就简单介绍一下本次重构内容!
一,项目结构
-
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
三、账号登录
经过以上步骤,项目就能够成功启动,但是项目必须登录才能进入,本项目设置了三个账号,存放在项目文件中,读者可自行拉取代码体验,文章最后我会附上项目完整免费源码(是不是良心博主)。
先别急,这里有必要作个说明,此处登录需要账号(也就是手机号)和验证码,验证码按照以上步骤获取即可,只有手机号合法且验证码正确方可登录成功!
四,重构说明
本项目共分为上图五个模块以及登录模块。本次项目重构整合了所有页面组件,公共组件,静态资源,改用json-server模拟接口实现页面功能。在复现之前所有功能的前提下,优化了部分功能,如购物车、订单模块等,还新增了账户余额查询,订单评论功能。
对于之前的代码也作出了优化,删除或更改了冗余的代码块,提取公用代码块为工具类,对于路由守卫也作出了更改,对于页面访问的权限只有登录账户才能访问。
对于组件名,变量名等统一了规范,全部按照阿里前端规范修改,变量或函数名更加语义化,也都做了详细的代码注释,方便初学者更加容易理解。
此外还修改了部分代码或是css的bug,使得项目运行更加流畅。当然,json-server模拟接口可能并不尽人意,奈何我只是小小一个前端。况且,重点是在于对于vue框架的项目实战学习。
五,总结
本次项目重构断断续续也花了挺久时间的,中间也是磕磕绊绊。好在重构工作初步完成,当然后续可能也会继续进行优化的。当下初学前端的读者可以点点关注,期待下后续吧!一个最最良心的前端博主!
最后的最后,最重要的源码地址(拉取默认分支即可):文章来源:https://www.toymoban.com/news/detail-603867.html
https://gitee.com/sandas/ruixing文章来源地址https://www.toymoban.com/news/detail-603867.html
到了这里,关于Vue移动端项目--瑞幸咖啡重构优化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!