免费做自我介绍网站,黄图网站有哪些 推荐,上海专业网站建设报价单,合肥网站建设制作来了客官#xff0c;好久不见#xff01; 从年初开始#xff0c;就有个想法#xff0c;想着把之前做过的项目重新整理一下。毕竟今时不同往日#xff0c;从现在的角度去看曾经做过的项目#xff0c;倒是觉得有很多稚嫩的地方。毕竟无论做什么都是熟能生巧#xff0c;由浅… 来了客官好久不见 从年初开始就有个想法想着把之前做过的项目重新整理一下。毕竟今时不同往日从现在的角度去看曾经做过的项目倒是觉得有很多稚嫩的地方。毕竟无论做什么都是熟能生巧由浅入深嘛。
瑞幸咖啡是之前做过的一个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://gitee.com/sandas/ruixing
