从零开始打造 Vue3.x 任务清单实战教程

2022-12-12 17:07:20

掌控 Vue3.x 全家桶：构建你的任务清单管理系统

在现代前端开发的世界中，Vue.js 3.x 凭借其强大而轻量的特性，已经成为构建交互式 Web 应用程序的热门选择。本文将带你踏上使用 Vue3.x 全家桶构建一个功能齐全的任务清单管理系统的旅程，涵盖从项目初始化到测试和部署的各个方面。

1. Vue3.x 项目初始化

安装 Node.js 和 Vue CLI：遵循官方文档中的步骤。
创建新项目：vue create vue-task-list
进入项目目录：cd vue-task-list
安装项目依赖：npm install

2. Vuex 状态管理

Vuex 是 Vue.js 中用于集中化状态管理的工具。

安装 Vuex：npm install vuex
创建 store 目录，在其中创建 index.js 文件。
定义 state（存储数据）、getters（获取派生数据）、mutations（修改 state）和 actions（处理异步操作）。

// store/index.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    tasks: []
  },
  getters: {
    getTaskCount(state) {
      return state.tasks.length
    }
  },
  mutations: {
    addTask(state, task) {
      state.tasks.push(task)
    },
    removeTask(state, task) {
      const index = state.tasks.indexOf(task)
      if (index !== -1) {
        state.tasks.splice(index, 1)
      }
    }
  },
  actions: {
    addTaskAsync({ commit }, task) {
      setTimeout(() => {
        commit('addTask', task)
      }, 1000)
    }
  }
})

3. 组件开发

创建 src/components 目录。
创建 TaskList.vue 组件，用于显示任务列表。
创建 TaskForm.vue 组件，用于添加和编辑任务。

// components/TaskList.vue
<template>
  <ul>
    <li v-for="task in tasks" :key="task.id">{{ task.name }}</li>
  </ul>
</template>

export default {
  props: ['tasks']
}

// components/TaskForm.vue
<template>
  <form @submit.prevent="addTask">
    <input v-model="newTaskName" />
    <button type="submit">Add Task</button>
  </form>
</template>

export default {
  data() {
    return {
      newTaskName: ''
    }
  },
  methods: {
    addTask() {
      this.$emit('addTask', { name: this.newTaskName })
      this.newTaskName = ''
    }
  }
}

4. 路由配置

Vue Router 用于管理应用程序中的导航。

安装 Vue Router：npm install vue-router
创建 router 目录，在其中创建 index.js 文件。
定义路由规则并注册到 Router 实例上。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

export default createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    }
  ]
})

5. 任务清单页面

创建 src/views 目录。
创建 Home.vue 组件，显示任务清单页面。

// views/Home.vue
<template>
  <div>
    <task-list :tasks="tasks"></task-list>
    <task-form @addTask="addTask"></task-form>
  </div>
</template>

export default {
  data() {
    return {
      tasks: []
    }
  },
  created() {
    // 获取任务列表
    this.getTasks()
  },
  methods: {
    addTask(task) {
      this.tasks.push(task)
    },
    getTasks() {
      // 使用 Vuex 的 getters 获取任务列表
      this.tasks = this.$store.getters.getAllTasks
    }
  }
}