好的，以下是一个简单的
Vue 3.0
项目实战：创建一个简单的 Todo List。
1. 首先，我们需要创建一个新的
Vue 3.0
项目。
打开终端并输入以下命令：
```
vue create todo-list
```
2. 安装 `
vuex` 和 `
vue-router`，这两个库都是
Vue 3.0 的常用库。在终端
中输入以下命令：
```
npm install
vuex
vue-router --save
```
3. 创建一个 `TodoList` 组件，在这个组件
中，可以列出所有的任务，并且可以添加、修改和删除任务。在 `src/components`
文件夹中创建一个新的文件 `TodoList.
vue`，并输入以下代码：
```html
<template>
<div>
<h1>Todo List</h1>
<form @submit.prevent="addTask">
<
input type="text" v-model="newTask" placeholder="Add new task">
<button type="submit">Add Task</button>
</form>
<ul>
<li v-for="(task, index) in tasks" :key="index">
<
input type="checkbox" v-model="task.completed" @change="toggleTask(index)">
<span :class="{ completed: task.completed }">{{ task.name }}</span>
<button @click="editTask(index)">Edit</button>
<button @click="deleteTask(index)">Delete</button>
</li>
</ul>
<div v-if="editingTask">
<h2>Edit Task</h2>
<form @submit.prevent="updateTask">
<
input type="text" v-model="updatedTask" :value="editingTask.name">
<button type="submit">Update Task</button>
</form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
newTask: '',
updatedTask: '',
editingTask: null,
tasks: [
{ name: 'Task 1', completed: false },
{ name: 'Task 2', completed: true },
{ name: 'Task 3', completed: false },
],
};
},
methods: {
addTask() {
if (this.newTask) {
this.tasks.push({ name: this.newTask, completed: false });
this.newTask = '';
}
},
toggleTask(index) {
this.tasks[index].completed = !this.tasks[index].completed;
},
editTask(index) {
this.editingTask = this.tasks[index];
this.updatedTask = this.editingTask.name;
},
updateTask() {
if (this.updatedTask) {
this.editingTask.name = this.updatedTask;
this.editingTask = null;
this.updatedTask = '';
}
},
deleteTask(index) {
this.tasks.splice(index, 1);
},
},
};
</script>
<style>
.completed {
text-decoration: line-through;
}
</style>
```
4. 创建一个 `router`，在 `src`
文件夹中创建一个新的文件 `router.js`，并输入以下代码：
```js
import { createRouter, createWebHistory } from '
vue-router';
import TodoList from './components/TodoList.
vue';
const routes = [
{
path: '/',
name: 'TodoList',
component: TodoList,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
```
5. 创建一个 `store`，在 `src`
文件夹中创建一个新的文件 `store.js`，并输入以下代码：
```js
import { createStore } from '
vuex';
export default createStore({
state() {
return {
count: 0,
};
},
mutations: {
increment(state) {
state.count++;
},
decrement(state) {
state.count--;
},
},
actions: {
increment(context) {
context.commit('increment');
},
decrement(context) {
context.commit('decrement');
},
},
});
```
6. 在 `main.js` 文件
中，将 `router` 和 `store` 导入，并将它们与
Vue 实例相关联。在 `src/main.js` 文件
中输入以下代码：
```js
import { createApp } from '
vue';
import App from './App.
vue';
import router from './router';
import store from './store';
createApp(App).use(router).use(store).mount('#app');
```
7. 在 `App.
vue` 文件
中，使用 `router-view` 渲染 `TodoList` 组件。在 `src`
文件夹中打开 `App.
vue` 文件，并将其修改为以下代码：
```html
<template>
<div>
<router-view></router-view>
</div>
</template>
```
现在你可以运行你的
项目了，并尝试添加、修改和删除任务。这个
项目只是一个简单的例子，但是它可以帮助你开始学习
Vue 3.0，并为你未来的
项目打下基础。
180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
