企业官网建设流程全解析

很多 Vue3 新手容易陷入一种尴尬的局面：ref、reactive、computed 这些 API 都看过了，简单页面也能写出来，但真的打开终端准备从头搭一个能拿得出手的项目时，却不知道第一行命令该敲什么，也不知道目录该怎么组织、接口该怎么对接、跨域该怎么处理。尤其是“AI 监控系统”这种听起来很有分量的项目，很多人还没开始，就被“AI”两个字吓退，觉得自己得先会训练模型才行。

这里我想先给一个明确判断：用 Vue3 做 AI 监控系统的前端，真正的难点从来不是 AI 算法，而是三件事——工程化项目骨架、视频流接入、实时检测结果的可视化。这三件事恰恰是已经掌握 Vue 基础的人能立刻上手并产生价值的地方。模型训练和推理通常由后端 Python 服务负责，前端要做的是把检测结果变成用户能看懂、能操作、能管理的中控界面。把这条边界想清楚，你才会知道这 1 个小时该把精力花在哪里。

本文会从零开始，带你完成 Vue3 + Vite 项目搭建，然后实现一个监控系统前端 Demo：包含视频画面播放、检测框叠加、实时统计卡片、告警记录列表，并预留对接真实 AI 检测服务的标准接口。全程会给你可以直接复制的代码，并说明每一步为什么这样做。理想情况下，跟随本文的路径一步步操作，一小时左右可以跑通前端闭环；如果你在环境版本上遇到问题，时间会稍长一些，但这比你自己从散落的知识点里拼凑出一条项目路径要快得多。文章末尾我还会额外讲清楚真实项目里的工程化与合规注意事项，这一部分建议你收藏，后面做生产项目时会用到。

1. Vue3 在 AI 监控系统里到底负责什么

很多初学者对“AI 监控系统”的理解是：前端要负责识别画面里的人、车、异常行为。这是个误区。如果你把“AI 检测”这件事全部压到前端，那基本做不成——浏览器里直接跑目标检测模型，既受性能限制，又受模型体积和 GPU 资源限制，现实中很少这么干。

一个典型的 AI 监控系统，逻辑上是分层的：

摄像头产生视频流后，由后端或边缘网关将视频流抽帧，送入 AI 模型推理，模型输出检测框坐标、目标类别和置信度，后端再把这些数据封装成 JSON 通过接口或 WebSocket 推给前端。前端 Vue3 拿到数据后，在视频画面上绘制矩形框、标签，同时更新告警列表和统计图表。

所以，Vue3 在 AI 监控系统里的核心职责可以归纳为四块：

1. 视频流接入与播放控制。
2. 检测结果叠加展示，也就是在画面上画框、标类别。
3. 告警信息管理，包括告警列表、告警详情、处理状态。
4. 数据可视化，用图表展示实时统计、趋势、设备在线率等。

把这些职责拆开，你会发现它并不是一个“高不可攀”的项目，而是一个典型的“后台管理系统 + 视频播放 + 数据可视化”的综合前端项目。本文后面的步骤，也是围绕这四个职责来展开的。

2. 环境准备与版本选择

实战之前，先把环境准备好。AI 监控系统的前端开发不需要安装 Python 或 PyTorch，这一点先明确，避免你把时间和磁盘空间花在不必要的地方。你真正需要准备的是下面几项。

2.1 Node.js 运行时

Vue3 项目依赖 Node.js。建议安装 LTS（长期支持）版本，Node.js 18 及以上对当前主流的 Vite 版本支持更好。版本过低会导致后续依赖安装失败，或者运行npm run dev时直接报错。检查是否已安装，打开终端执行：

node -v npm -v

如果没有输出，或者版本过低，去 Node.js 官网下载对应操作系统的 LTS 安装包，安装完成后重新打开终端确认。

2.2 包管理器

npm 会随 Node.js 一起安装，所以最少只需 npm 即可完成本文全部操作。如果你本机已经安装了 pnpm 或 yarn，也可以使用，它们的核心命令差异不大。pnpm 的安装速度更快、磁盘占用更少，这里也推荐你后续尝试。检查命令：

npm -v pnpm -v

输出 pnpm 版本号说明已经安装；如果没有，可以执行npm install -g pnpm全局安装。

2.3 编辑器与插件

推荐使用 VSCode，并安装两个关键插件：

• Volar：Vue3 官方推荐的语法插件，提供模板语法高亮、类型检查、自动补全。
• TypeScript Vue Plugin（Volar）：支持在 Vue 单文件组件中提供更完整的类型支持。

这里要特别提醒一个常见坑：早期 Vue2 项目用的 Vetur 插件在 Vue3 项目中会冲突。如果你同时安装了 Vetur，建议在 Vue3 项目中禁用或卸载，否则容易出现模板语法提示混乱、组件导入报错等问题。

2.4 浏览器

Chrome 或 Edge 都可以。开发阶段需要通过浏览器访问 Vite 启动的本地服务地址，并且用开发者工具查看接口请求和前端报错。建议对浏览器开发者工具的基础操作熟悉一点，后面排查问题会频繁用到。

3. 从零创建一个 Vue3 项目

环境就绪后，开始创建项目。这里我们直接使用 Vite 官方脚手架。Vite 是目前 Vue3 项目最主流的前端构建工具，开发服务器启动速度快，HMR（热更新）体验好，配置也比较简洁。

在终端执行以下命令：

npm create vite@latest my-ai-monitor -- --template vue

执行之后，脚手架会创建一个名为my-ai-monitor的目录，并生成一个 Vue3 基础项目。如果你用的是 pnpm：

pnpm create vite my-ai-monitor --template vue

接下来进入项目目录，安装依赖：

cd my-ai-monitor npm install

依赖安装完成后，先启动一次，确认基础项目没问题：

npm run dev

默认情况下，终端会输出一个本地访问地址，通常是http://localhost:5173。在浏览器打开这个地址，如果能出现 Vite + Vue 的默认欢迎页，说明项目创建成功。

此时你可以在 VSCode 中打开项目，看一下生成的目录结构：

my-ai-monitor/ ├── public/ ├── src/ │ ├── assets/ │ ├── components/ │ ├── App.vue │ └── main.js ├── index.html ├── package.json └── vite.config.js

这里src目录是核心开发目录。App.vue是根组件，main.js是入口文件。后续我们会在src下继续补充api、mock、components等目录。

创建项目这一步虽然简单，但有不少人卡住，常见原因有两个：一是 Node.js 版本过低，导致脚手架安装或依赖安装阶段报错；二是网络原因导致npm install很慢或超时，此时可以考虑切换为国内 npm 镜像源，例如npm config set registry https://registry.npmmirror.com。这一步不影响项目本身，只是为了加快依赖下载。

4. 设计监控页面的组件结构

演示项目不要直接在一个组件里写完所有逻辑，否则后面扩展会非常痛苦。即便只是 Demo，也要按真实项目的组织方式拆分组件。

4.1 目录规划

我建议在src下创建以下目录与文件：

src/ ├── api/ │ └── monitor.js ├── components/ │ ├── VideoMonitor.vue │ ├── StatsCard.vue │ └── AlertList.vue ├── mock/ │ └── mockData.js ├── App.vue └── main.js

每个文件只负责一件事：

• api/monitor.js：统一封装后端接口请求，后续对接真实服务时，只需改这里。
• components/VideoMonitor.vue：视频播放区域 + 检测框叠加。
• components/StatsCard.vue：实时统计卡片，例如今日告警数、在线设备数、实时检测数。
• components/AlertList.vue：告警记录列表。
• mock/mockData.js：开发阶段的模拟数据，模拟 AI 检测服务返回的结果。

这种拆分的好处是，页面结构清晰，组件可以独立测试，也能在不同页面复用。比如StatsCard不仅可以用在监控大屏，还可以用在其他管理页面。

4.2 数据怎么流动

AI 监控系统的前端数据，本质上是“检测结果数据的不断流入和展示”。在后端没有就绪的情况下，我们先用 mock 数据模拟这个过程。典型的数据结构是这样的：

{ "id": "evt_001", "timestamp": "2025-06-01 10:30:00", "objects": [ { "label": "person", "confidence": 0.92, "bbox": [100, 200, 150, 300] }, { "label": "car", "confidence": 0.85, "bbox": [400, 300, 200, 120] } ] }

其中bbox表示检测框坐标，可以约定为[x, y, width, height]，也可以约定为[x1, y1, x2, y2]。这个必须和后端对齐，否则前端画框会错位。后面我会专门讲坐标换算问题。

在 Vue3 中，我们使用ref和reactive来管理这些响应式数据。onMounted或setInterval定时刷新，就可以模拟出“实时检测”的效果。

5. 完整示例代码实现

下面进入文章的核心部分。我会按文件顺序给出代码，每个文件都说明放在什么路径、完成什么功能，以及为什么这样写。

5.1 mock 数据文件

文件路径：src/mock/mockData.js

// 模拟 AI 检测服务返回的数据 export function getMockDetectionData() { return { id: "evt_" + Math.floor(Math.random() * 10000), timestamp: new Date().toLocaleString("zh-CN"), objects: [ { label: "person", confidence: 0.93, bbox: [100, 200, 150, 300] }, { label: "car", confidence: 0.87, bbox: [420, 280, 220, 130] }, { label: "person", confidence: 0.78, bbox: [700, 380, 120, 260] } ] }; } // 模拟告警记录 export const mockAlerts = [ { id: 1, time: "2025-06-01 09:12:30", type: "人员闯入", level: "高", status: "未处理" }, { id: 2, time: "2025-06-01 09:35:10", type: "车辆违停", level: "中", status: "已处理" }, { id: 3, time: "2025-06-01 10:02:45", type: "人员聚集", level: "高", status: "未处理" } ];

这个文件的作用是模拟后端返回的检测结果和告警列表。你可以把mockAlerts当成一组静态数据，它用于渲染左侧或下方的告警表格；getMockDetectionData则是一次次被调用的函数，用来模拟实时检测结果。

5.2 视频监控与检测框绘制组件

文件路径：src/components/VideoMonitor.vue

这个组件是 AI 监控系统前端最核心的部分。它需要同时完成两件事：播放视频画面，并在画面上绘制检测框。

这里选择用<video>元素播放视频，再用一个<canvas>覆盖在视频上方绘制检测框。引入 canvas 是因为浏览器不能直接在 video 上持久绘制图形，而 canvas 可以方便地在每一帧或每次新数据到达时重绘。

<template> <div class="video-monitor"> <div class="video-wrapper"> <video ref="videoRef" class="video-player" src="/videos/demo.mp4" controls muted autoplay ></video> <canvas ref="canvasRef" class="video-canvas"></canvas> </div> <div class="detection-info"> <p>当前检测目标数：{{ detectionCount }}</p> <p>最近更新时间：{{ lastUpdateTime }}</p> </div> </div> </template> <script setup> import { ref, onMounted, onBeforeUnmount } from "vue"; import { getMockDetectionData } from "../mock/mockData"; const videoRef = ref(null); const canvasRef = ref(null); const detectionCount = ref(0); const lastUpdateTime = ref(""); let timer = null; function drawDetections(objects) { const canvas = canvasRef.value; const video = videoRef.value; if (!canvas || !video) return; // 设置 canvas 与 video 的显示尺寸一致 canvas.width = video.clientWidth; canvas.height = video.clientHeight; const ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); const videoWidth = video.videoWidth || 1280; const videoHeight = video.videoHeight || 720; const scaleX = canvas.width / videoWidth; const scaleY = canvas.height / videoHeight; objects.forEach((obj) => { const [x, y, w, h] = obj.bbox; const drawX = x * scaleX; const drawY = y * scaleY; const drawW = w * scaleX; const drawH = h * scaleY; ctx.strokeStyle = "#00ff88"; ctx.lineWidth = 2; ctx.strokeRect(drawX, drawY, drawW, drawH); ctx.fillStyle = "rgba(0, 255, 136, 0.8)"; ctx.font = "14px sans-serif"; ctx.fillText( `${obj.label} ${(obj.confidence * 100).toFixed(1)}%`, drawX, drawY - 6 ); }); } function loadMockDetection() { const data = getMockDetectionData(); detectionCount.value = data.objects.length; lastUpdateTime.value = data.timestamp; drawDetections(data.objects); } onMounted(() => { // 启动定时器，模拟实时检测数据推送 loadMockDetection(); timer = setInterval(loadMockDetection, 3000); }); onBeforeUnmount(() => { if (timer) { clearInterval(timer); } }); </script> <style scoped> .video-wrapper { position: relative; width: 100%; max-width: 960px; background: #000; } .video-player { width: 100%; display: block; } .video-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .detection-info { margin-top: 10px; display: flex; gap: 20px; font-size: 14px; } </style>

代码中的关键逻辑是坐标换算。AI 模型返回的检测框坐标通常是在原始视频分辨率下的坐标，例如视频原始分辨率是 1920x1080，模型给了bbox: [100, 200, 150, 300]，这个坐标直接画在canvas上会错位，因为 canvas 的实际显示尺寸可能只有 800 宽。所以必须先计算缩放比例，再绘制。scaleX 和 scaleY 就是原始视频尺寸与当前显示尺寸的比例。

如果你本机没有public/videos/demo.mp4这个文件，视频区域会黑屏，但 canvas 上的检测框和右侧信息仍然会正常更新，不影响理解。你可以自行准备一段 mp4 监控视频，放到public/videos目录下。

5.3 统计卡片组件

文件路径：src/components/StatsCard.vue

统计卡片用于展示系统整体运行状态。它接收一个title和value，是一个低耦合的通用组件。

<template> <div class="stats-card"> <div class="stats-title">{{ title }}</div> <div class="stats-value">{{ value }}</div> </div> </template> <script setup> defineProps({ title: { type: String, required: true }, value: { type: [String, Number], required: true } }); </script> <style scoped> .stats-card { background: #ffffff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); text-align: center; } .stats-title { font-size: 14px; color: #666; margin-bottom: 8px; } .stats-value { font-size: 28px; font-weight: 600; color: #1a1a1a; } </style>

这样的组件好处是接数据方便。你可以在父组件里准备一个stats对象，然后通过v-for批量渲染多个卡片，而不是在每个页面里复制卡片样式。

5.4 告警列表组件

文件路径：src/components/AlertList.vue

告警列表展示系统产生的告警记录。同样，这里先用静态 mock 数据，后续替换成接口数据。

<template> <div class="alert-list"> <h3>告警记录</h3> <el-table :data="alerts" stripe style="width: 100%"> <el-table-column prop="time" label="时间" width="180"></el-table-column> <el-table-column prop="type" label="告警类型"></el-table-column> <el-table-column prop="level" label="级别" width="80"></el-table-column> <el-table-column prop="status" label="状态" width="100"></el-table-column> </el-table> </div> </template> <script setup> import { ref } from "vue"; import { mockAlerts } from "../mock/mockData"; const alerts = ref(mockAlerts); </script> <style scoped> .alert-list { background: #ffffff; border-radius: 8px; padding: 16px; } </style>

这里使用了el-table这种组件标签，需要额外引入 Element Plus 组件库。如果你不想引入 Element Plus，可以把这个组件改成原生表格。不过在实际项目中，像告警列表这种信息密度高、需要排序和分页的列表，使用成熟的组件库会更高效。Element Plus 的安装方式很简单：

npm install element-plus

然后在src/main.js中全局注册：

import { createApp } from "vue"; import ElementPlus from "element-plus"; import "element-plus/dist/index.css"; import App from "./App.vue"; const app = createApp(App); app.use(ElementPlus); app.mount("#app");

需要注意，Element Plus 的当前使用版本以官方文档为准，版本升级后个别组件的用法可能略有调整。

5.5 API 封装与开发代理

文件路径：src/api/monitor.js

真实项目中，前端不会直接去 import mock 数据，而是通过 axios 请求后端接口。这里我们先封装一个规范接口层，后续如果后端就绪，只改这里的请求地址和解析逻辑即可。

import axios from "axios"; // 基于 Vite 环境变量配置后端地址 const BASE_URL = import.meta.env.VITE_API_BASE_URL || ""; const request = axios.create({ baseURL: BASE_URL, timeout: 10000 }); // 获取实时检测结果 export function getRealTimeDetections() { return request.get("/api/monitor/detections"); } // 获取告警列表 export function getAlertList(params) { return request.get("/api/monitor/alerts", { params }); }

需要安装 axios：

npm install axios

开发阶段，前端项目的地址是http://localhost:5173，后端接口地址可能是http://localhost:8080。如果直接请求，会触发浏览器跨域限制。解决办法是在vite.config.js中配置开发代理，让前端把/api开头的请求转发到后端服务。

文件路径：vite.config.js

import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; export default defineConfig({ plugins: [vue()], server: { port: 5173, proxy: { "/api": { target: "http://localhost:8080", changeOrigin: true } } } });

配置完成后，前端代码里请求/api/monitor/detections，实际会被 Vite 代理转发到http://localhost:8080/api/monitor/detections。这样浏览器里看到的是同源请求，不会报跨域错误。

5.6 组装页面 App.vue

文件路径：src/App.vue

接下来把上面的组件组装到主页面中。

<template> <div class="monitor-page"> <header class="page-header"> <h1>AI 智能监控系统</h1> </header> <section class="stats-row"> <StatsCard title="在线设备" :value="128" /> <StatsCard title="今日告警" :value="36" /> <StatsCard title="实时检测目标" :value="detectionTotal" /> </section> <section class="main-layout"> <div class="video-area"> <VideoMonitor /> </div> <div class="alert-area"> <AlertList /> </div> </section> </div> </template> <script setup> import { ref } from "vue"; import StatsCard from "./components/StatsCard.vue"; import VideoMonitor from "./components/VideoMonitor.vue"; import AlertList from "./components/AlertList.vue"; const detectionTotal = ref(0); // 这里可以进一步对接 API，实时更新 detectionTotal </script> <style scoped> .monitor-page { padding: 24px; background: #f5f7fa; min-height: 100vh; } .page-header { margin-bottom: 20px; } .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; } .main-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; } @media (max-width: 768px) { .main-layout { grid-template-columns: 1fr; } } </style>

到这里，一个可以运行的 AI 监控系统前端 Demo 就成型了。页面包括顶部标题、三张统计卡片、左侧视频监控区域、右侧告警列表。视频区域会每 3 秒刷新一次检测框数据，模拟实时检测效果。

6. 给 AI 检测能力留一个标准接口

很多人做完上面的 Demo 后会问：真实项目里，检测结果到底怎么来？这里必须把前后端协作方式讲清楚。

真实 AI 监控系统里，视频流通常不是直接由前端推给模型的。标准流程是：摄像头推流到后端媒体服务或边缘计算网关，后端将视频流解码并按一定频率抽帧，抽出的画面送入 AI 模型推理，模型输出检测框和分类结果，最后由后端通过 WebSocket 推给前端。也就是说，前端拿到的永远是“已经检测完成的结果”，而不是“需要检测的视频帧”。

用 WebSocket 推送是更贴近实时监控的做法。相比 HTTP 轮询，WebSocket 可以让后端在检测结果产生时主动推给前端，延迟更低，前端不需要反复发起无意义的请求。当需要展示视频流画面时，有两种常见思路：

1. 前端直接播放视频流地址，由后端将 RTSP 等协议转换成 HLS 或 WebRTC，再交给浏览器播放。浏览器不能直接播放 RTSP 协议，这一点要记住。
2. 画面由前端播放，检测框数据由 WebSocket 推送，前端拿到数据后在 canvas 上绘制。检测框坐标必须以视频帧的原始分辨率换算。

下面是一个简单的 WebSocket 使用示例，你可以在VideoMonitor.vue中替换掉定时器逻辑：

let socket = null; function connectWebSocket() { socket = new WebSocket("ws://localhost:8080/ws/monitor"); socket.onopen = () => { console.log("WebSocket 连接已建立"); }; socket.onmessage = (event) => { const data = JSON.parse(event.data); detectionCount.value = data.objects.length; lastUpdateTime.value = data.timestamp; drawDetections(data.objects); }; socket.onclose = () => { console.log("WebSocket 连接断开"); // 实际项目中要做断线重连处理 }; } onMounted(() => { connectWebSocket(); }); onBeforeUnmount(() => { if (socket) { socket.close(); } });

真实项目中，WebSocket 地址需要通过环境变量配置，并且连接建立后要处理后端主动下发的鉴权信息。连接断开时要实现指数退避重连，不能死循环请求，否则会打爆后端。

7. 运行、验证与联调

现在来验证整个系统。在项目根目录执行：

npm run dev

终端会输出类似这样的信息：

VITE v5.0.0 ready in 520 ms ➜ Local: http://localhost:5173/

在浏览器中打开http://localhost:5173，你应该看到：

• 页面顶部是“AI 智能监控系统”标题。
• 三张统计卡片显示设备数、告警数和实时检测目标数。
• 视频区域播放本地视频，同时绿色矩形框和标签每隔几秒刷新一次。
• 右侧告警列表包含三条模拟告警。

如果页面能正常显示这些内容，说明 Vue3 项目搭建和基础组件运行已经成功。接下来可以把 5.1 节中的 mock 数据换成真实接口验证。

切换方式非常简单：在api/monitor.js中调用真实接口，然后在组件里使用axios请求替换getMockDetectionData。验证联调时，打开浏览器开发者工具的 Network 面板，查看请求是否发到后端地址，状态码是否为 200，响应数据是否符合预期格式。

需要特别注意的是，真实后端返回的数据结构与 mock 数据很可能不一致。联调第一步永远是先确认字段名和坐标格式，而不是急着渲染。用一个最简单的接口先打通链路，比一次对接所有接口要稳得多。

8. 常见问题与排查方法

下面把 Vue3 开发 AI 监控系统时最容易遇到的问题整理成一张排查表。

这张表是排错的起点。真实项目中的问题往往不是单个原因，而是多个因素叠加。遇到问题时，从终端日志、浏览器控制台、Network 请求三个位置同时看，能缩小排查范围。

9. 工程化最佳实践与安全提醒

Demo 能跑通只是第一步。如果你打算把这个项目往简历作品集或真实业务方向发展，下面几个工程化和安全方面的建议值得认真对待。

9.1 目录分层与状态管理

当项目规模变大后，建议把components进一步细分为common、feature、layout等子目录，同时把业务逻辑提取到composables（组合式函数）中。检测数据、告警数据、设备状态这些跨组件共享的数据，建议统一用一个状态管理库管理。Vue3 生态中推荐 Pinia，它比 Vuex 更简单，也更贴合组合式 API 的风格。

不要把所有接口请求都写在组件里。统一走api目录封装，再配合接口响应拦截器处理错误信息和登录失效跳转，这是前端工程的底线规范。

9.2 环境变量与配置管理

不同环境的后端地址、WebSocket 地址、是否需要 mock，都应该通过环境变量控制。Vite 项目使用.env.development、.env.production文件，然后在代码中用import.meta.env访问。

# .env.development VITE_API_BASE_URL=/api VITE_WS_URL=ws://localhost:8080/ws/monitor

# .env.production VITE_API_BASE_URL=https://monitor.example.com/api VITE_WS_URL=wss://monitor.example.com/ws/monitor

核心原则是：代码库里不出现硬编码的后端 IP、密钥或账号密码。任何敏感信息一旦提交到 Git，即使后面删除，也可能留在提交历史里。

9.3 性能优化

视频监控页面的性能瓶颈通常集中在 canvas 绘制和列表渲染。检测结果每次推送时，不需要整块 canvas 全部清空重绘，可以只在检测框变化时更新。当告警记录非常多时，使用虚拟滚动组件，避免一次性创建上千个 DOM 节点。

另外，如果需要在同一个页面同时播放多路视频，请务必限制视频数量，并且在后端做转码和码率适配。前端一次播放超过 8 路高清视频，即使浏览器能撑住，用户体验也会严重下降。

9.4 安全与合规提醒

这是整个项目中必须反复强调的部分。AI 监控系统可能涉及人脸、车牌、人员轨迹等个人信息。无论做什么功能，都必须遵守合法合规原则。这里给出几条底线建议：

• 系统部署和测试必须获得明确授权，不得用于未经许可的监控场景。
• 视频和检测结果默认做脱敏处理，人脸、车牌等敏感信息在界面展示时要打码或隐藏。
• 系统要有完整的访问控制和审计日志，前端不能直接暴露后端管理接口。
• 生产环境必须使用 HTTPS 和 WSS，防止视频和检测数据在传输中被截获。
• 后端接口必须做权限校验，不能仅靠前端隐藏入口来保护数据。

安全不是上线前临时加的功能，而是系统设计的一部分。前端工程师在联调时就要确认接口鉴权方案和数据脱敏策略，否则后面返工的成本会很高。

10. 总结与下一步学习方向

到这里，你已经完成了从零搭建 Vue3 项目到实现一个 AI 监控系统前端 Demo 的完整闭环。回顾一下，你实际上已经掌握了几个核心能力：使用 Vite 创建 Vue3 项目并管理工程结构；用 canvas 在视频画面上绘制实时检测框；通过 mock 数据模拟前后端联调；使用 axios 封装接口并配置 Vite 开发代理；理解 WebSocket 在实时监控场景中的接入方式。

接下来往哪个方向深入，取决于你的目标。如果你想把这个 Demo 变成能展示的项目，建议先补充 Vue Router 做页面跳转，再引入 Pinia 管理全局状态，然后把 mock 数据替换成真实接口联调。如果你想深入 AI 监控的算法侧，可以从 YOLO 系列模型和 PyTorch 环境搭建开始学习，但那是另一条技术栈，和应用前端是两条并行路线。

最后给你一个非常实际的建议：不要停留在“能跑”就满足。尝试给视频源换成一棵真实的 RTSP 摄像头流，尝试让告警列表支持点击查看检测框详情，尝试在后端模拟一个简单的检测服务把数据推给前端。这些“再往前走一步”的过程，才是你把 Vue3 真正用到生产级 AI 监控系统的关键。建议你先把这篇文章收藏起来，需要时按照步骤操作；有任何一步卡住了，可以对照常见问题排查表逐条检查环境、请求、坐标系这三个最容易出问题的地方。