好的，我们可以创建一个基于 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 组件：
```vue
<template>
<div>
<h1>
Todo List</h1>
<form @submit.prevent="add
Todo">
<input type="text" v-model="new
Todo" />
<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 new
Todo = ref('');
const
todos = ref<string[]>([]);
const add
Todo = () => {
if (new
Todo.value.trim()) {
todos.value.push(new
Todo.value.trim());
new
Todo.value = '';
}
};
return {
new
Todo,
todos,
add
Todo,
};
},
});
</script>
```
在这个组件中，我们使用了 `ref` 来定义了一个 `new
Todo` 和 `
todos` 变量，`new
Todo` 表示新增的待办事项，`
todos` 是一个待办事项列表。我们还定义了一个 `add
Todo` 方法，用来向 `
todos` 中添加一个新的待办事项。
在模板中，我们使用了 `v-for` 来遍历 `
todos`，并将每个待办事项渲染为一个列表项。同时，我们使用了 `v-model` 来绑定 `new
Todo` 变量，当用户在输入框中输入内容时，`new
Todo` 的值会自动更新。
5. 在 `App.vue` 中使用 `
Todo` 组件：
```vue
<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 应用的简单步骤。
1931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
