D12 Vue3 + Vite 前端基础

标准（必讲）。公司前端以 Vue3 + Vite 为主（sub-box 的 dashboard 就是它）。第 4 周项目 C（管理面板）直接用到。

教学目标（学完能做什么）

能看懂 Vue3 组合式 API（setup/ref/computed）的基础写法
能启动一个 Vite 项目，写组件、配路由、拉状态
能用 fetch/axios 调后端 API 并渲染数据
能理解前端如何与 D10 的后端"前后端联调"

前置要求

D10（后端 API 长什么样）、D3（HTTP/JSON）

本模块在业务中的位置

业务对外是 API，对内/对客户还要"一张脸"——管理面板、dashboard。第 4 周项目 C 就是"把 A/B 的能力做成页面"。

内容分段

1. 前端三件套与 Vite

HTML（结构）+ CSS（样式）+ JavaScript/TypeScript（逻辑）。
Vite = 现代前端构建工具，秒级启动、热更新。
公司项目示例：services/sub-box/web/（Vue3 + Vite）。

2. 启动一个 Vite + Vue3 项目

npm create vite@latest mypanel -- --template vue-ts
cd mypanel && npm install
npm run dev            # http://localhost:5173 热更新

3. 组合式 API 基础

<script setup lang="ts">
import { ref, computed } from 'vue'

const balance = ref(0)                       // 响应式数据
const cost = computed(() => balance.value * 0.003)  // 派生值
</script>

<template>
  <p>余额：{{ balance }}</p>
  <p>预计费用：{{ cost }}</p>
  <button @click="balance++">加 1</button>
</template>

记忆：ref 包起来的值在模板里自动解包、在 script 里要 .value。

4. 调后端 API（前后端联调的核心）

const users = ref([])

async function loadUsers() {
  const res = await fetch('/api/users', {
    headers: { 'X-Admin-Key': 'secret-123' }   // 带鉴权，呼应 D10
  })
  if (!res.ok) {
    console.error('加载失败', res.status)       // 4xx/5xx 处理
    return
  }
  users.value = await res.json()
}

loadUsers()

痛点预防：跨域(CORS)——前端 5173 调后端 8000 会被浏览器拦；开发期用 Vite 代理：

// vite.config.ts
server: { proxy: { '/api': 'http://localhost:8000' } }

5. 路由与组件

<!-- 组件：把页面拆块 -->
<!-- UserList.vue 被 Home 引用 -->

// 路由：/users 显示用户页
import { createRouter, createWebHistory } from 'vue-router'
routes: [
  { path: '/', component: Home },
  { path: '/users', component: UserList }
]

原则：一个页面一个组件文件，公共部分拆子组件。

6. 前端接后端的"契约"

后端给什么（响应结构），前端就按什么渲染；前后端先对好接口文档（Swagger / OpenAPI），再各自开发——这正是第 4 周项目 D17 要做的"接口契约"。
常见问题：后端字段改了前端没跟 → 联调必炸。契约先行 + 随时同步。

讲解节奏建议（约 90 分钟）

时段	内容
09:00-09:10	引入：业务也要一张脸，公司 dashboard 用 Vue3
09:10-09:30	启动 Vite 项目 + 目录结构
09:30-09:55	组合式 API（ref/computed/事件）
09:55-10:25	fetch 调后端 + CORS 与代理（现场演示踩坑）
10:25-10:45	路由与组件拆分
10:45-11:30	学员实操：给 D10 API 做个页面（对应作业）
11:30-11:50	常见误区 + 小结
11:50-12:00	布置作业

常见误区汇总

误区	正确理解
前端只做样子	前端=接口消费者，联调一半的坑在前端
CORS 是后端的事	后端配也行，但开发期 Vite 代理最省事
ref 到处都加 .value	模板里自动解包；script 里才要 .value
接口文档无所谓	契约先行，前后端各自开发才不炸
一个文件塞全部页面	拆组件 + 路由，可维护
前端可以不管鉴权	前端只是"体验层"，真正的校验永远在后端

D12 Vue3 + Vite 前端基础

On this page