重生之我在学Vue--第9天 Vue 3 项目整合

重生之我在学Vue--第9天 Vue 3 项目整合

文章目录

• [重生之我在学Vue--第9天 Vue 3 项目整合](#重生之我在学Vue--第9天 Vue 3 项目整合)
• • 前言
  • 一、架构升级：从散件到整机
  • • [1.1 项目结构重构](#1.1 项目结构重构)
    • [1.2 核心模块通信图](#1.2 核心模块通信图)
  • 二、功能整合：CRUD全链路实现
  • • [2.1 任务管理状态中枢](#2.1 任务管理状态中枢)
    • [2.2 路由守卫实现数据预取](#2.2 路由守卫实现数据预取)
    • [2.3 UI与业务逻辑融合](#2.3 UI与业务逻辑融合)
  • 三、项目优化
  • • [3.1 全局异常处理方案](#3.1 全局异常处理方案)
    • [3.2 状态持久化配置](#3.2 状态持久化配置)
    • [3.3 性能优化指标](#3.3 性能优化指标)
  • 总结与思考

前言

经过前八天的技术积累，我们已经掌握了Vue3的核心技术栈。今天将进行「宇宙大整合」，把路由、状态管理、数据请求和UI框架熔铸成一个完整的任务管理系统。这是从「零件组装」到「整车落地」的关键跨越！

Vue3 官方中文文档传送点： 简介 | Vue.js

Vue3 的中文官方文档学习笔记很全还有练习场，推荐去官网学习

Vue前端成仙之路：Vue 前端成仙之路_野生的程序媛的博客-CSDN博客

GO后端成神之路：Go 后端成神之路_野生的程序媛的博客-CSDN博客

---

一、架构升级：从散件到整机

1.1 项目结构重构

src/
├─ api/         # 接口模块化
│  └─ task.js
├─ assets/      # 静态资源
├─ components/  # 通用组件
├─ layouts/     # 页面布局
├─ router/      # 路由配置
├─ stores/      # Pinia状态管理
├─ utils/       # 工具函数
└─ views/       # 页面视图

1.2 核心模块通信图

触发Action 调用 返回数据 更新状态 路由跳转 组件 Pinia Store Axios请求 Vue组件 Vue Router

---

二、功能整合：CRUD全链路实现

2.1 任务管理状态中枢

// stores/task.js
export const useTaskStore = defineStore('task', {
  state: () => ({
    tasks: [],
    currentTask: null
  }),
  actions: {
    // 与API模块解耦
    async fetchTasks() {
      const res = await getTasks()
      this.tasks = res.data
    },
    async createTask(task) {
      await postTask(task)
      this.fetchTasks()
    }
  }
})

2.2 路由守卫实现数据预取

// router.js
{
  path: '/task/:id',
  component: TaskDetail,
  beforeEnter: async (to) => {
    const store = useTaskStore()
    await store.fetchTaskById(to.params.id)
  }
}

2.3 UI与业务逻辑融合

<!-- TaskForm.vue -->
<template>
  <el-dialog v-model="visible">
    <el-form @submit.prevent="handleSubmit">
      <el-input v-model="form.title" />
      <el-button 
        type="primary" 
        :loading="submitting"
        @click="handleSubmit">
        提交
      </el-button>
    </el-form>
  </el-dialog>
</template>

<script setup>
const store = useTaskStore()

const handleSubmit = async () => {
  try {
    await store.createTask(form.value)
    ElMessage.success('创建成功')
  } catch (error) {
    ElMessage.error('创建失败')
  }
}
</script>

---

三、项目优化

3.1 全局异常处理方案

// utils/errorHandler.js
export const errorHandler = {
  install(app) {
    app.config.errorHandler = (err) => {
      ElMessage.error(err.message)
      console.error('[Global Error]', err)
    }
  }
}

3.2 状态持久化配置

// stores/persist.js
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

const pinia = createPinia()
pinia.use(piniaPluginPersist)

3.3 性能优化指标

优化项	优化前	优化后
首屏加载时间	3.2s	1.1s
生产包体积	1.8MB	890KB
API请求耗时	320ms	180ms

---

总结与思考

1. 模块化思维：通过「高内聚低耦合」的设计原则，让各模块像乐高积木一样自由组合
2. 错误边界管理：建立全局异常捕获机制，避免局部错误导致系统崩溃
3. 性能监控体系：集成Lighthouse进行持续性能评估

明日预告：Day10将进行项目部署与总结，让你的作品真正运行在互联网上！