通过vite创建vue3项目，具体查看vite官网，安装依赖，引入element组件，操作查看elementPlus
components下创建TodoList组件

<template><div class="todo-list"><h1>Todo List</h1><p class="subtit">The completion of every small goal is a step towards success.</p><div class="list-box"><div class="add-btn-box"><buttonclass="add-btn"@click="dialogVisible=true">+添加任务 </button></div><divclass="list"v-if="list.length"><templatev-for="(item) in list":key="item.id"><TodoItem:data="item"@change="handleChange"@delete="handleDelete"/></template></div><div v-else><el-empty description="暂无任务" /></div></div><p class="statistics">已完成 {{finishedCount}} 项任务，还有 {{todoCount}} 项待完成</p><TodoFormv-model:visible="dialogVisible"@confirm="handleAdd"/></div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import TodoItem from './TodoItem.vue'
import TodoForm from './TodoForm.vue'
const dialogVisible = ref(false)
interface Item {title: stringfinished: booleanid: string
}
const list = ref<Item[]>([])
const getRandomRequestId = (n: number) => {let rdmNum = ''for (let i = 0; i < n; i++) {rdmNum += Math.floor(Math.random() * 10) // [0,10)的整数}return rdmNum
}
const finishedCount = computed(() => {return list.value.filter((item: Item) => item.finished).length
})
const todoCount = computed(() => {return list.value.length - finishedCount.value
})
const handleAdd = (obj: Item) => {list.value.push({ id: getRandomRequestId(3), ...obj })
}
const handleChange = (id: string, finished: booelan) => {list.value.forEach((item: Item) => {if (item.id === id) {item.finished = finished}})
}
const handleDelete = (id: string) => {list.value = list.value.filter((item: Item) => item.id !== id)
}
</script>
<style scoped>
.todo-list {display: flex;flex-direction: column;justify-content: center;align-items: center;
}
* {font-style: normal;text-transform: none;font-family: Roboto, Roboto;
}
h1 {font-weight: 700;font-size: 30px;color: #111827;line-height: 36px;text-align: center;
}
.subtit {font-weight: 400;font-size: 16px;color: #4b5563;text-align: center;
}
.list-box {width: 800px;height: 570px;padding: 20px;margin: 50px auto;box-sizing: border-box;background: #f9fafb rgba(0, 0, 0, 0.001);box-shadow: 0px 10px 15px 13px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);border-radius: 12px 12px 12px 12px;
}
.add-btn-box {margin: 16px 0;text-align: right;
}
.add-btn {width: 134px;height: 50px;background: #4f46e5;border-radius: 4px 4px 4px 4px;color: #fff;font-size: 16px;font-weight: 500;border: none;cursor: pointer;
}
.statistics {font-weight: 400;font-size: 16px;color: #6b7280;
}
</style>

创建TodoItem组件

<template><div class="todo-item"><el-checkboxv-model="currentData.finished"size="large"@change="handleChange"><span :class="['title',{finished: currentData.finished}]">{{currentData.title}}</span></el-checkbox><el-icon @click="handleDelete"><Delete /></el-icon></div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const { data } = defineProps({data: {type: Object,default: () => {},},
})
const emit = defineEmits(['change', 'delete'])
const currentData = ref(data)
const handleDelete = () => {emit('delete', currentData.value.id)
}
const handleChange = (value: boolean) => {emit('change', { id: currentData.value.id, finished: value })
}
</script>
<style scoped>
.todo-item {display: flex;justify-content: space-between;align-items: center;width: 736px;height: 72px;padding: 24px 16px;margin-bottom: 12px;background: #f9fafb;border-radius: 12px 12px 12px 12px;
}
.title {font-weight: 400;font-size: 16px;color: #4b5563;line-height: 24px;
}
.finished {color: #9ca3af;text-decoration: line-through;
}
</style>

创建TodoForm组件

<template><div class="todo-form"><el-dialogv-model="localVisible"title="Tips"width="500":before-close="handleClose"><el-formref="formRef":inline="true":model="form"class="demo-form-inline"><el-form-itemlabel="任务名称"prop="title":rules="[{required: true,message: 'Please input title',trigger: 'blur',}]"><el-inputv-model="form.title"placeholder="请输入代办事项"clearable/></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="handleClose">Cancel</el-button><el-buttontype="primary"@click="handleConfirm(formRef)">Confirm</el-button></div></template></el-dialog></div>
</template>
<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import type { FormInstance } from 'element-plus'
const props = defineProps({visible: {type: Boolean,default: false,},
})
const formRef = ref<FormInstance>()
const emit = defineEmits(['update:visible', 'confirm'])
const form = reactive({title: '',finished: false,
})
const localVisible = computed({get() {return props.visible},set(value) {emit('update:visible', value)},
})
const handleClose = () => {emit('update:visible', false)
}
const handleConfirm = (formEl: FromInstance | undefined) => {console.log(formEl)if (!formEl) returnformEl.validate((valid) => {console.log(valid, form, 'valid')if (valid) {emit('confirm', form)form.title = ''handleClose()}})
}
</script>
<style scoped>
</style>

在App.vue中

<script setup lang="ts">
import TodoList from './components/todo/TodoList.vue'
</script><template><div class="app"><TodoList /></div><RouterView />
</template>

main.ts

import './assets/main.css'import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'import App from './App.vue'
import router from './router'const app = createApp(App)app.use(createPinia())
app.use(router)
app.use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}
app.mount('#app')