Vue3框架使用组件搭建TodoList应用 熟悉和了解Vue3的基本指令和组件的用法。 2、了解并体验Vue3等现代框架所代表的开发思想和思路。 3、积累前端开发的应用案例。

在使用Vue3框架构建TodoList应用时，首先你需要确保已经安装了Vue CLI（命令行工具），它是Vue.js官方提供的脚手架工具，方便快速创建和管理项目。以下是一个简单的步骤指导：

1. **创建新项目**：

   vue create todo-app

进入生成的项目目录：

   cd todo-app

2. **选择预设**: 在`vue.config.js`中配置支持Vue 3及其Composition API（现在是默认选项）：

   // vue.config.js
   module.exports = {
     transpileDependencies: ['@vue/cli-plugin-vuex'],
     compositionAPI: true,
   };

3. **定义组件**：
- **TodoList.vue**：这是主要的组件，用于显示待办事项列表和操作（添加/删除任务）。

   <template>
     <div>
       <h1>Todo List</h1>
       <input v-model="newTodo" @keyup.enter="addTodo">
       <ul>
         <li v-for="(todo, index) in todos" :key="index">
           {{ todo.text }}
           <button @click="deleteTodo(index)">Delete</button>
         </li>
       </ul>
     </div>
   </template>

   <script setup>
   import { ref, onMounted, onUnmounted } from 'vue';

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

   function addTodo() {
     if (newTodo.value.trim()) {
       todos.value.push({ text: newTodo.value, completed: false });
       newTodo.value = '';
     }
   }

   function deleteTodo(index) {
     todos.value.splice(index, 1);
   }

   onMounted(() => {
     // 初始化数据或从本地存储加载
   });

   onUnmounted(() => {
     // 保存数据到本地存储
   });
   </script>

4. **状态管理（可选）**：
使用Vuex库来管理应用的状态，例如待办事项的增删改查逻辑。

   // store/index.js
   import { createStore } from 'vuex';
   
   export default createStore({
     state: {
       todos: [],
     },
     mutations: {
       addTodo(state, todo) {
         state.todos.push(todo);
       },
       removeTodo(state, index) {
         state.todos.splice(index, 1);
       },
     },
     actions: {
       async addTodo(context, todo) {
         await context.commit('addTodo', todo);
       },
     },
   });

5. **模板内导入和注册组件**：
如果需要更复杂的组件如`TodoItem.vue`，将它们拆分并在适当的地方导入和使用。

6. **运行应用**：

   npm run serve

这样你就实现了基础的TodoList应用，通过Vue3的组件化开发和响应式原理，以及可能的Vuex状态管理，展示了现代前端开发的简洁性和灵活性。实际应用中还可以加入更多功能，比如路由切换、表单验证等。