---
jd-id: "01.00"
name: "student-app-frontend"
desc: "Vue 3 + Vite + Vuetify 3 SPA for managing students, subjects, terms, stories, and tasks. Talks to a Django REST Framework backend over JWT-authenticated JSON APIs."
author: "Clark Lin"
updateTime: "2026-07-06"
status: active
type: "A-高层系统"
tags:
  - Vue3
  - Vuetify
  - JavaScript
  - 前端
  - Pinia
---

**Port:** localhost:5173

---

## Tech Stack

| Layer | Technology | Role |
|-------|------------|------|
| Framework | Vue 3.5 (Composition API, `<script setup>`) | SPA shell, reactive views |
| Build | Vite 7 (`vite.config.js`) | Dev server (`0.0.0.0:5173`), HMR, ESM bundling |
| UI | Vuetify 3.9 (Material Design) | Component library, light theme, all components/directives imported globally |
| Routing | vue-router 4 (`createWebHistory`) | Client-side navigation, JWT-aware guard |
| State | Pinia 3 (`stores/auth.js`) | Reactive auth store with axios interceptor setup |
| HTTP | axios (`api/index.js`) | REST client, baseURL hardcoded to `http://192.168.1.52:8001`, 401 → refresh → retry |
| i18n | vue-i18n 9 (en + zh-CN) | Composition mode (`legacy: false`), locale persisted to `localStorage('preferred-locale')` |
| Calendar | `@fullcalendar/*` 6.1 | Task view powered by `TaskView.vue` |
| Icons | `@mdi/font` 7 | Material Design Icons set |
| Quality | ESLint 9 + Prettier 3 | Lint with `--fix` and Prettier over `src/` |

> All Vuetify labs components must be imported at the call site — only the core set is global.

---

## Core Features

- **Master Data CRUD** — Students, Subjects, Terms, Stories (each with its own `*.vue` view under `src/views/`)
- **Task Calendar** — FullCalendar-driven `TaskView.vue` with image attachments fetched as blobs
- **JWT Authentication** — Access + refresh tokens in `localStorage`; axios interceptor refreshes and retries once per request, second 401 triggers logout
- **Bilingual i18n** — English (source) and `zh-CN`, switched via `LanguageSwitcher.vue`
- **Layout system** — `App.vue` picks a layout from `route.meta.layout` (`'default'` for authenticated pages, `'none'` for `/login`)

---

## Configuration

- [[01.10 configs]]

---

## Hierarchy

- [[01.01 src-api]]
- [[01.02 src-components]]
- [[01.03 src-views]]
- [[01.04 src-router]]
- [[01.05 src-stores]]
- [[01.06 src-locales]]
- [[01.07 src-plugins]]
- [[01.08 src-utils]]
- [[01.09 src-assets-styles]]
- [[01.11 django-backend]]

---

**Location:** `C:\Projects\vue\student-app-frontend` | Tags: #Vue3 #Vuetify #JavaScript #前端 #Pinia