前端框架实战项目：从零搭建一个待办事项应用

为什么选择实战项目来学前端框架

很多人学完 Vue 或 React 的基础语法后，一上手真实项目就发懵。光看文档就像背菜谱，不下厨永远不知道火候怎么掌握。拿一个具体的项目练手，边做边查，问题来了才记得住解法。待办事项（Todo App）是个经典入门项目，功能清晰，又能覆盖增删改查、状态管理、组件通信这些核心知识点。

选哪个框架？Vue 还是 React？

如果你是新手，Vue 的模板语法更直观，HTML 里直接写 v-for、v-model，改个输入框内容马上看到反馈。React 则更“JavaScript 化”，JSX 写起来像在写 JS 逻辑，适合喜欢灵活控制的开发者。这里以 Vue 3 为例，用组合式 API 搭建，但思路在 React 里一样能套用。

项目结构先理清楚

别急着写代码，先把文件夹分好。src 目录下建 components 存小组件，比如 TodoItem；views 放页面级组件，比如 TodoList；store 管全局状态。这种结构项目一大就不会乱，以后加用户登录、数据同步也容易扩展。

<template>
  <div class="todo-list">
    <input 
      v-model="newTodo" 
      @keyup.enter="addTodo" 
      placeholder="回车添加新任务"
    >
    <ul>
      <TodoItem 
        v-for="(todo, index) in todos" 
        :key="index" 
        :text="todo.text" 
        :done="todo.done"
        @toggle="toggleDone(index)"
        @delete="deleteTodo(index)"
      />
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import TodoItem from './components/TodoItem.vue'

const newTodo = ref('')
const todos = ref([])

const addTodo = () => {
  if (newTodo.value.trim()) {
    todos.value.push({
      text: newTodo.value,
      done: false
    })
    newTodo.value = ''
  }
}

const toggleDone = (index) => {
  todos.value[index].done = !todos.value[index].done
}

const deleteTodo = (index) => {
  todos.value.splice(index, 1)
}
</script>

组件拆分让代码更清爽

TodoItem 组件只管单个任务的展示和交互。它接收 text 和 done 作为 props，点击时触发 toggle 事件，删除按钮发 delete 事件。父子组件通过 emit 通信，逻辑清晰，测试也方便。你以后想换种样式，比如加个图标，只改这一个文件就行。

<template>
  <li class="todo-item" :class="{ done }">
    <span @click="$emit('toggle')">{{ text }}</span>
    <button @click="$emit('delete')">删除</button>
  </li>
</template>

<script setup>
defineProps(['text', 'done'])
defineEmits(['toggle', 'delete'])
</script>

本地存储让数据不丢失

页面一刷新，任务全没了？加个 localStorage 就行。在 onMounted 时读取数据，每次 todos 变化就存一次。不用第三方库，几行代码解决实际问题。用户哪怕关了浏览器，第二天打开任务还在，体验立马不一样。

这类小功能积累多了，项目才真正“能用”。你在公司做的后台系统，本质也是表单 + 列表 + 接口调用，只是加了权限、分页、 loading 状态而已。从 Todo App 走一遍流程，下次接活心里就有底了。