training-system/training/codes/training-system-frontend

中道救援培训系统 - 前端

技术栈

• Vue 3.4 + Composition API + <script setup>
• TypeScript 5
• Vite 5
• Pinia 2 + pinia-plugin-persistedstate
• Vue Router 4
• Element Plus 2
• Axios
• SCSS

目录结构

src/
  api/           # API 接口层（按模块拆分，不写状态、不写UI）
  assets/        # 静态资源、SCSS 变量与全局样式
  components/    # 业务组件（不写API）
    Layout/      # 布局：AppLayout / Sidebar / Header / Breadcrumb
    common/      # 通用：StatCard / PageCard / StatusBadge / EmptyState
  composables/   # 组合式函数（复杂逻辑抽取）
  router/        # 路由配置 + 导航守卫
  stores/        # Pinia 状态管理（不写UI）
  types/         # TypeScript 类型定义
  utils/         # 工具函数（纯函数，无副作用）
  views/         # 页面容器（只组装，不写业务逻辑）

分层原则

层级	职责	禁止
views	页面组装、布局占位	直接调用 API、操作 localStorage
components	UI 渲染、props/emit	调用 API、访问 store（Layout 除外）
composables	业务逻辑组装、数据流转	操作 DOM、直接渲染 UI
stores	状态管理、跨组件共享	写 UI、调 DOM
api	HTTP 请求、数据转换	写状态、写 UI
utils	纯函数工具、常量	副作用、API 调用

快速开始

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产环境
npm run build

部署

构建产物位于 dist/ 目录，通过 Nginx 独立部署：

server {
  listen 80;
  server_name training.example.com;
  root /var/www/training-frontend/dist;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  location /api {
    proxy_pass http://backend:8080;
  }
}