Vue移动端项目--瑞幸咖啡重构优化

来了客官,好久不见!

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

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

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

一,项目结构

Vue移动端项目--瑞幸咖啡重构优化_第1张图片

  • 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移动端项目--瑞幸咖啡重构优化_第2张图片
先别急,这里有必要作个说明,此处登录需要账号(也就是手机号)和验证码,验证码按照以上步骤获取即可,只有手机号合法且验证码正确方可登录成功!

四,重构说明

在这里插入图片描述

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

五,总结

本次项目重构断断续续也花了挺久时间的,中间也是磕磕绊绊。好在重构工作初步完成,当然后续可能也会继续进行优化的。当下初学前端的读者可以点点关注,期待下后续吧!一个最最良心的前端博主!

最后的最后,最重要的源码地址(拉取默认分支即可):

https://gitee.com/sandas/ruixing

你可能感兴趣的:(项目,vue.js,重构,前端)