当前位置：首页 > VUE

vscode实现vue的todolist

2026-01-20 21:39:56VUE

安装必要工具

确保已安装最新版VSCode，推荐安装以下扩展：

Volar（Vue官方推荐的语言支持插件）
Vue VSCode Snippets（代码片段快捷生成）
ESLint（代码规范检查）

通过终端全局安装Vue CLI：

npm install -g @vue/cli

创建Vue项目

在目标目录执行脚手架命令：

vue create vue-todolist

选择Vue 3预设配置，安装完成后进入项目目录：

cd vue-todolist

项目结构修改

删除默认的src/components/HelloWorld.vue，新建以下文件：

vscode实现vue的todolist

src/
├── components/
│   ├── TodoItem.vue
│   └── TodoForm.vue
├── App.vue
└── main.js

核心代码实现

App.vue 主组件

<template>
  <div id="app">
    <h1>Todo List</h1>
    <TodoForm @add-todo="addTodo" />
    <ul>
      <TodoItem 
        v-for="todo in todos" 
        :key="todo.id"
        :todo="todo"
        @toggle-complete="toggleComplete"
        @delete-todo="deleteTodo"
      />
    </ul>
  </div>
</template>

<script>
import TodoItem from './components/TodoItem.vue'
import TodoForm from './components/TodoForm.vue'

export default {
  components: { TodoItem, TodoForm },
  data() {
    return {
      todos: [
        { id: 1, text: 'Learn Vue', completed: false },
        { id: 2, text: 'Build project', completed: false }
      ]
    }
  },
  methods: {
    addTodo(newTodo) {
      this.todos.push({
        id: Date.now(),
        text: newTodo,
        completed: false
      })
    },
    toggleComplete(id) {
      const todo = this.todos.find(t => t.id === id)
      if (todo) todo.completed = !todo.completed
    },
    deleteTodo(id) {
      this.todos = this.todos.filter(todo => todo.id !== id)
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  max-width: 600px;
  margin: 0 auto;
}
ul {
  list-style: none;
  padding: 0;
}
</style>

TodoItem.vue 子组件

<template>
  <li :class="{ completed: todo.completed }">
    <input 
      type="checkbox" 
      :checked="todo.completed"
      @change="$emit('toggle-complete', todo.id)"
    />
    <span>{{ todo.text }}</span>
    <button @click="$emit('delete-todo', todo.id)">Delete</button>
  </li>
</template>

<script>
export default {
  props: {
    todo: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
li {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
.completed span {
  text-decoration: line-through;
  color: #888;
}
button {
  margin-left: auto;
  background: #ff4444;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}
</style>

TodoForm.vue 子组件

vscode实现vue的todolist

<template>
  <form @submit.prevent="handleSubmit">
    <input 
      type="text" 
      v-model="newTodo" 
      placeholder="Add new todo..."
      required
    />
    <button type="submit">Add</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      newTodo: ''
    }
  },
  methods: {
    handleSubmit() {
      this.$emit('add-todo', this.newTodo)
      this.newTodo = ''
    }
  }
}
</script>

<style scoped>
form {
  display: flex;
  margin-bottom: 20px;
}
input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
}
button {
  padding: 8px 15px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}
</style>

运行项目

在VSCode终端启动开发服务器：

npm run serve

访问http://localhost:8080即可看到运行效果。使用Ctrl+C可停止服务。

项目优化建议

添加状态管理（可选安装Pinia）：

npm install pinia

创建store/todoStore.js：

import { defineStore } from 'pinia'

export const useTodoStore = defineStore('todos', {
  state: () => ({
    todos: []
  }),
  actions: {
    addTodo(text) {
      this.todos.push({
        id: Date.now(),
        text,
        completed: false
      })
    },
    // 其他操作方法...
  }
})