利用vue2脚手架制作Todo列表展示

在Vue2中，我们可以使用官方提供的脚手架Vue CLI来创建一个简单的Todo列表项目。以下是基本步骤：

1. **安装Vue CLI**：首先需要确保已全局安装Node.js，然后运行`npm install -g @vue/cli`命令安装Vue CLI。

2. **创建新项目**：打开终端或命令提示符，输入`vue create todo-list-app`，根据提示选择默认选项创建一个新的Vue应用。

3. **进入项目目录**：创建完成后，通过`cd todo-list-app`进入项目文件夹。

4. **修改模板**：在`src/components`目录下创建一个名为`TodoList.vue`的新组件，内容大致如下：

<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="newTodo" placeholder="Add new todo">
    <button @click="addTodo">Add</button>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="removeTodo(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push(this.newTodo);
        this.newTodo = '';
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
}
</script>

这个模板有一个输入框用于添加新的待办事项，以及一个按钮用于提交。列表中显示所有待办事项，并允许删除单个任务。

5. **主入口修改**：在`src/App.vue`文件中导入并使用`TodoList`组件。

6. **启动服务**：运行`npm run serve`启动本地开发服务器，然后可以在浏览器中查看Todo列表。