Vue3.2生产项目实战初体验，干货满满！

2024-01-12 07:25:43

项目搭建

1.1 创建新项目

首先，我们使用Vue CLI创建新项目：

vue create my-project --preset vue3

1.2 安装依赖

接下来，我们安装必要的依赖项：

npm install

1.3 启动项目

最后，我们启动项目：

npm run serve

2. 功能开发

在项目搭建完成后，我们就可以开始开发功能了。这里，我们以一个简单的Todo应用为例，该应用具有以下功能：

添加任务
编辑任务
删除任务
完成任务

2.1 添加任务

添加任务功能的实现非常简单，我们只需要在src/components/TodoList.vue组件中添加以下代码即可：

<template>
  <form @submit.prevent="addTask">
    <input type="text" v-model="newTask" placeholder="Enter a new task">
    <button type="submit">Add Task</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      newTask: ''
    }
  },
  methods: {
    addTask() {
      this.$emit('add-task', this.newTask)
      this.newTask = ''
    }
  }
}
</script>

2.2 编辑任务

编辑任务功能的实现也比较简单，我们只需要在src/components/TodoItem.vue组件中添加以下代码即可：

<template>
  <li>
    <input type="text" v-model="task.text" @input="updateTask">
    <button @click="deleteTask">Delete</button>
  </li>
</template>

<script>
export default {
  props: ['task'],
  methods: {
    updateTask() {
      this.$emit('update-task', this.task)
    },
    deleteTask() {
      this.$emit('delete-task', this.task)
    }
  }
}
</script>

2.3 删除任务

删除任务功能的实现更加简单，我们只需要在src/components/TodoList.vue组件中添加以下代码即可：

<template>
  <ul>
    <todo-item v-for="task in tasks" :key="task.id" :task="task" @delete-task="deleteTask"></todo-item>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      tasks: []
    }
  },
  methods: {
    deleteTask(task) {
      this.tasks = this.tasks.filter(t => t.id !== task.id)
    }
  }
}
</script>

2.4 完成任务

完成任务功能的实现也比较简单，我们只需要在src/components/TodoItem.vue组件中添加以下代码即可：

<template>
  <li>
    <input type="checkbox" v-model="task.completed" @change="completeTask">
    <label :for="task.id">{{ task.text }}</label>
  </li>
</template>

<script>
export default {
  props: ['task'],
  methods: {
    completeTask() {
      this.$emit('complete-task', this.task)
    }
  }
}
</script>