当前位置：首页 > news >正文

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

news 来源：原创 2025/5/2 16:41:00

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

文章目录

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

二、功能整合：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)