重生之我在学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 项目结构重构

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

1.2 核心模块通信图

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


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

2.1 任务管理状态中枢

javascript 复制代码
// 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 路由守卫实现数据预取

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

2.3 UI与业务逻辑融合

vue 复制代码
<!-- 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 全局异常处理方案

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

3.2 状态持久化配置

javascript 复制代码
// 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将进行项目部署与总结,让你的作品真正运行在互联网上!

相关推荐
半点寒12W2 分钟前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端1 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~1 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程1 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏1 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083162 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头3 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's3 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫3 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim3 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron