【Vue学习】强迫症设计师如何获得一个自己满意的TodoList

Rico的Todo List

在线版Todo List 地址： Ricocc - https://ricocc.com/todo/

最近开始重新把学习 Vue 的计划提上日程，首先入手的便是经典的 TodoList 小案例。在网上确实也有很多 TodoList 的学习案例教学，基本都是使用的原生样式，或者是“简洁”的视觉设计。

作为一个不标准小设计来说，会有一丢丢强迫症，视觉上不舒服，就不大喜欢用。由于也一直有使用Todo List的习惯，因此就计划学习的时候，面对自己写出来的初稿，视觉性太差，无法接受作为日常使用需要。

因此就从自己个人的喜好出发，制作满足自身视觉需求的在线版本，在日常工作也可以继续使用，审美疲劳了就再换掉视觉风格。

我个人的产品诉求是：基础、干净简洁、不需要额外功能、视觉合格。

设计风格参考使用了Figma社区 aakarshna 的 Noted设计规范，并且依据自己的设计做了调整。视觉设计主要使用了Figma，前端技术使用了 Vue 2.x 和 Sass。设计元素尽量使用base64，减少文件数量，方便在本地环境直接打开使用。

目前网页版本已上线。可以扫描顶部的二维码或者从链接去查看，主要侧重 PC 端，移动端只是简单做了些兼容。Bug和不足还是有的！

目前已实现的基础功能有：

✔️ 所有提交操作支持Enter回车键和提交按钮提交~
✔️ 拖拽Todo上下移动可排序(仅支持PC)~
✔️ 双击已有的Todo可进行编辑~
✔️ 对已有内容进行筛选~
✔️ 删除的内容在回收站可及时恢复~
✔️ 所有的Todo数据存储在浏览器本地~

视觉和规范如下：

TodoList_01.png

TodoList_02.png

TodoList_03.png

TodoList_输入动效

TodoList_编辑排序

TodoList_筛选、删除、恢复

TodoList_04.png

TodoList_05.png

TodoList_06.png

TodoList_07.png