vue3实现饿了么项目复盘

项目复盘

这篇文章进行本次项目复盘

预初计划与背景

本次项目的目标是打算练习使用vue3， 在斟酌很多项目之后，最后选择实现饿了么。因为饿了么以交易为主，包含了足够的业务逻辑，且内容更多是基于前端基础任务， 更适合现阶段我的水平。

过程

项目中，我的策略是从主页开始，按照用户的基本购物逻辑，逐步制作页面。

项目中的问题

1. 项目中，获取后端数据并不是足够迅速，导致会出现数据渲染过慢。因此采用了vue-simple-spinner来实现loading效果。虽然有效改善了用户体验，但是我还是计划在未来学习性能优化， 来更好的改善项目 ，加强用户体验。

2. 登录的接口受高版本chrome中SameSite策略，导致登录等请求无法实现。因为后端接口并没有考虑这个情况，且经过查询相关信息后得知，chrome94版以上并不能更改samesite策略，所以最后只能尝试用firefox。但是，如果在实际的开发过程中， 我认为应该与后端交流，互相达成一致的策略，实现功能的开发。

项目评估

完成预期：

1. 完成了饿了么的基本业务逻辑。
2. 尝试运用了Vue3中Composition API的优势，对代码进行逻辑划分。
3. 注重了用户体验效果，进行了loading效果、弹框、信息提示等的开发。

未达预期：

1. 用户体验还是不够好，因为前端我觉得很重要的一点就是提升用户体验，这也是我之后要去学习的， 例如如何去性能优化。
2. 代码还是存在冗余，没有充分发挥Vue3新特性的优势。
3. 不擅长预先构思项目整体，例如在pinia实现的store，由于在最初没有合理构思，导致呈现一种所有内容都放置在一个store中，过于杂乱无章。因此，后续实现项目的时候，应该尝试学习预先构思整体架构，再去着手实现代码。这样应该会效率更高，效果更好。

项目预览地址
https://goddessiu.github.io/

项目源码地址
https://github.com/goddessIU/vue3-eleme

希望能得到您的一个star