简单易上手的vue3.0+ts实战小项目！！附带后台接口

1.前言

一直想体验一下vue3的开发使用，但是一直在推脱，正好最近也在学习Ts那不如直接做个小项目好了，在找项目的时候发现有的项目都比较大，但是一个经典todoList有显的太单调。

拿起手机突然看到我小米手机中的原生便签应用，看起来还不错，于是就有了下面这个小demo。还在犹豫没有上手项目的同学赶快动起来吧！

github地址：https://github.com/1034637588/ToDoList

2.项目演示

通过增、删、改、查的顺序进行一下简单的演示✋

3.项目介绍

其实就是一个简单的vue3全家桶+vant+ts的todoList 不过使用node+koa+ts+mongodb搭建了一个简单的接口服务，也在github中大家可以拉下载在本地运行。这样就有接口可以开发啦！

主要功能有：
1.新增便签
2.修改便签
3.删除便签（长按删除、修改为空删除）
4.搜索便签
5.瀑布流的布局方式，触底更新 等等
当然搜索和加载更多也做了防抖个回流等等。

大家可以看到，待办模块使没有开发的，为了大家可以练习扩展，相关接口我也已经提供。

4.配套的node服务

项目地址：https://github.com/1034637588/ToDoListServer

当然大家需要先安装一下本地的mongodb服务，然后再装一下ts环境就好了。

并且创建这么两个集合

结构如下：

都为字符串类型

同为字符串，isdone为boolean

5.vue3+ts的使用心得

1.vue3的使用体会

我感觉刚上手的时候会觉得，没有了以前的固定结构觉得反而更麻烦凌乱，但是写完几个页面以后就会体验到compositionAPI的乐趣，尤其是在公用逻辑的抽离，我们可以把状态，声明周期函数，计算属性等等都可以进行抽离出去，封装成函数或者其他进行使用。

而且也不会出现代码太多的时候想写个方法要翻翻翻翻到methods的地方去写，随时随地，只需要在setup函数返回就好。

还有加上ts以后，使用store啊，或者请求数据时返回的data对象，在获取属性的时候都会有非常好的代码提示，对于没有提示寸步难行的同学们简直就是福音，当然我就是那些同学。。。

总的来说，只有有vue2的基础，看看文档使用还是问题不大的。

2.ts的体会‍♂️

最开始我也是从java学起来的，刚接触js的时候感觉很不习惯，因为不需要提前声明类型，但是使用久了以后久慢慢习惯了，并且用的理所应当，以至于再学习ts时，又感觉声明类型变得很不对劲。

但是由于又类型的声明，在写一下方法或者其他的时候，，本质上就是良好的注释。再配合ide这样在编写的过程中就可以进行一些校验，这样代码质量会高一些，而且可以通过声明来进行代码提示，这一点还是比较快乐的。虽然定义的时候很繁琐，但是最后使用的时候看到完完整整的提示，心里还是美滋滋的

本文没有讲vue3的使用，也没有贴项目代码，因为我觉得没有必要，官方文档已经写的很棒了，不需要我这个搬运工，而且项目也不是代码片段可以解释的清楚的，只有大家做一遍才会有更好的感受！

---

可能项目中会出现这样那样的小bug，也希望大家可以指出，我的初衷还是给大家提供一个比较好的上手项目的方向，不复杂，也不简单，希望还在观望的大家积极上手！！有问题多交流