目录

项目结构

创建todolist组件

创建todoinput组件

创建todobutton组件

项目结构

今天用 vite 脚手架搭建一个 vue3 的小案例，vite的搭建过程参考：vite的搭建 。其项目结构组件构成如下：注意：因为使用的是 vite 框架，使用less样式需 npm i less -D 进行下载一下

在输入框输入信息之后，会加载到数组里面，在底部的按钮进行选择已完成和未完成的情况。

项目案例书写的样式是借助 bootstrap 样式的，不清楚如何使用请翻阅这篇文章：文章链接

创建todolist组件

我们根据App根组件中data里面return过来的列表数据循环遍历到todolist组件里面，借助bootstrap里面的列表组里面的样式遍历到页面即可，如下：

当我们选中复选框时，我们去呈现一个文字被滑横线以及字体改变的效果，这里借助 v-bind 属性去动态绑定，借助 三元运算符 去实现即可，如下：

至此，todolist的基本功能已经实现。

创建todoinput组件

创建该组件依然借助 bootstrap 里面的样式，如下：

将样式直接粘到todoinput组件里面，进行一定的修改，如下：

接下来通过自定义事件，将todoinput里面的input输入的数据传递到根组件App上，如下：

给表单添加提交按钮，将input输入框输入的数据通过自定义事件传递给父组件身上。

创建todobutton组件

创建该组件依然借助 bootstrap 里面的样式，如下：

将样式直接粘到该组件上，进行一定的修改，如下：

通过自定义事件，将 index 的值传递给根组件App上。

App根组件拿到index值，通过计算属性来判断按钮点击时的activeIndexBtn的值，来呈现不同的内容。

至此，三个组件封装完成，案例的具体结构如下：