用vue3和ts来做代todo

好的，我们可以创建一个基于 Vue 3 和 TypeScript 的 todo 应用。首先需要创建一个 Vue 3 项目，可以使用 Vue CLI 进行快速创建。

1. 首先安装 Vue CLI：

   npm install -g @vue/cli

2. 创建一个新项目：

   vue create vue3-todo --default

在选择 features 时选择 TypeScript，这样就可以创建一个基于 TypeScript 的 Vue 3 项目。

3. 安装依赖：

   cd vue3-todo
   npm install

4. 创建一个 Todo 组件：

   <template>
     <div>
       <h1>Todo List</h1>
       <form @submit.prevent="addTodo">
         <input type="text" v-model="newTodo" />
         <button type="submit">Add</button>
       </form>
       <ul>
         <li v-for="(todo, index) in todos" :key="index">{{ todo }}</li>
       </ul>
     </div>
   </template>

   <script lang="ts">
   import { defineComponent, ref } from 'vue';

   export default defineComponent({
     name: 'Todo',
     setup() {
       const newTodo = ref('');
       const todos = ref<string[]>([]);

       const addTodo = () => {
         if (newTodo.value.trim()) {
           todos.value.push(newTodo.value.trim());
           newTodo.value = '';
         }
       };

       return {
         newTodo,
         todos,
         addTodo,
       };
     },
   });
   </script>

在这个组件中，我们使用了 `ref` 来定义了一个 `newTodo` 和 `todos` 变量，`newTodo` 表示新增的待办事项，`todos` 是一个待办事项列表。我们还定义了一个 `addTodo` 方法，用来向 `todos` 中添加一个新的待办事项。

在模板中，我们使用了 `v-for` 来遍历 `todos`，并将每个待办事项渲染为一个列表项。同时，我们使用了 `v-model` 来绑定 `newTodo` 变量，当用户在输入框中输入内容时，`newTodo` 的值会自动更新。

5. 在 `App.vue` 中使用 `Todo` 组件：

   <template>
     <div id="app">
       <Todo />
     </div>
   </template>

   <script lang="ts">
   import { defineComponent } from 'vue';
   import Todo from './components/Todo.vue';

   export default defineComponent({
     name: 'App',
     components: {
       Todo,
     },
   });
   </script>

6. 运行项目：

   npm run serve

打开浏览器访问 http://localhost:8080，就可以看到一个简单的 todo 应用了。

以上就是基于 Vue 3 和 TypeScript 创建 todo 应用的简单步骤。