使用vue-cli完成todoList

Vue CLI (Vue脚手架) 是用于快速创建 Vue.js 应用程序的工具，它提供了一套命令行界面和配置模板，让你能够方便地搭建项目结构、安装依赖和配置基本设置。要使用 Vue CLI 创建一个简单的 Todo List 示例，请按照以下步骤操作：

1. **安装Vue CLI**:
打开终端或命令提示符，全局安装 Vue CLI：

   npm install -g @vue/cli

2. **初始化新项目**:
运行 `vue create todo-app`，输入项目名称和选项（默认即可），创建一个新的 Vue 项目。

3. **进入项目目录**:

   cd todo-app

4. **选择预设**:
如果你想基于现成的 UI 框架如 Vuetify 或 Element Plus 来构建，可以运行 `vue add <framework>`，例如 `vue add vuetify`。如果不添加框架，那么就直接跳过这一步。

5. **打开项目**:

   vue serve

这将启动一个本地开发服务器，你可以通过浏览器访问 `http://localhost:8080` 看到应用。

6. **创建 TodoList 组件**:
在项目文件夹中，打开 `src/components` 目录，新建一个名为 `TodoList.vue` 的文件。在这个组件里，你可以定义一个列表，每个元素都是一个 `v-for` 循环的对象，包含 `text` 和 `toggleStatus` 等属性。

7. **主 App 组件引用**:
在 `src/App.vue` 文件中，导入并使用 `TodoList` 组件，并在模板部分使用 `<TodoList />`。

8. **数据管理**:
可能需要一个Vuex store来管理 todo 列表的状态，如果应用复杂，还可以考虑路由和状态管理库（如Vuex Router）。

9. **样式和自定义功能**:
根据需要，你可以为组件添加样式（使用 CSS 或 SCSS）、事件处理以及自定义功能。

完成以上步骤后，你就有了一个基础的 Vue CLI Todo List 应用了。记得在每次修改完成后保存并刷新浏览器查看效果。