Vue 3 + Vite 前端项目学习指南

这是一个基于 Vue 3 和 Vite 构建的前端项目，主要实现了用户认证（登录/注册）和聊天功能。

🛠️ 技术栈

本项目使用了以下核心技术和库：

• 核心框架: Vue 3 (Composition API)
• 构建工具: Vite - 极速的前端构建工具
• 路由管理: Vue Router 4 - 处理页面跳转和路由守卫
• 状态管理: Pinia - Vue 的新一代状态管理库
• HTTP 请求: Axios - 处理后端 API 交互
• 工具库:
  • @vueuse/core - Vue 组合式 API 的实用工具集
  • markdown-it - Markdown 解析器（用于聊天消息渲染）
  • dompurify - HTML 净化工具（防止 XSS 攻击）

📂 项目结构

frontend/
├── index.html              # 入口 HTML 文件
├── package.json            # 项目依赖和脚本配置
├── vite.config.js          # Vite 配置文件
└── src/
    ├── main.js             # 项目入口文件 (Vue 实例挂载、路由/Pinia 配置)
    ├── App.vue             # 根组件
    ├── style.css           # 全局样式
    ├── components/         # 公共组件目录
    ├── pages/              # (备用) 页面目录
    ├── views/              # 页面级组件 (路由对应的视图)
    │   ├── HomePage.vue    # 主页 (需要登录)
    │   ├── LoginPage.vue   # 登录页
    │   └── RegisterPage.vue # 注册页
    ├── stores/             # Pinia 状态管理
    │   └── auth.js         # 用户认证状态 (登录状态、用户信息)
    ├── services/           # 业务逻辑与 API 服务
    │   ├── api.js          # Axios 封装与通用 API 方法
    │   └── chat.js         # 聊天相关服务逻辑
    └── styles/             # 样式文件目录

🚀 快速开始

1. 环境准备

确保你的电脑上安装了 Node.js (推荐 v16 或更高版本)。

2. 安装依赖

在项目根目录下打开终端，运行以下命令安装项目所需的依赖包：

npm install

3. 启动开发服务器

安装完成后，运行以下命令启动本地开发环境：

npm run dev

启动后，通常可以通过浏览器访问 http://localhost:5173 查看项目。

4. 构建生产版本

如果需要部署项目，可以运行构建命令：

npm run build

📖 核心功能详解 (学习重点)

1. 路由与权限控制 (src/main.js)

项目在 main.js 中配置了全局路由守卫 (router.beforeEach)。

• 逻辑: 检查目标路由是否需要认证 (meta: { requiresAuth: true })。
• 未登录: 如果需要认证且用户未登录，强制跳转到 /login。
• 已登录: 如果用户已登录且尝试访问登录/注册页，自动跳转到 /home。

2. 状态管理 (src/stores/auth.js)

使用 Pinia 管理用户的登录状态。

• useAuthStore 钩子通常包含 isAuthenticated (是否登录)、user (用户信息) 等状态，以及 login、logout 等 Action 方法。

3. 聊天功能实现

• Markdown 渲染: 项目引入了 markdown-it，说明聊天消息支持 Markdown 语法。
• 安全防护: 使用 dompurify 对渲染后的 HTML 进行清洗，防止恶意脚本注入，这是前端处理富文本内容的安全最佳实践。

💡 学习建议

如果你是初学者，建议按照以下顺序阅读代码：

1. src/main.js: 了解 Vue 应用是如何初始化的，以及插件（Router, Pinia）是如何安装的。
2. src/router/index.js (或 main.js 中的路由配置): 理解路由定义和守卫逻辑。
3. src/stores/auth.js: 学习如何使用 Pinia 定义状态和修改状态的方法。
4. src/views/LoginPage.vue: 学习表单处理、如何调用 Store 中的 Action 以及如何处理异步请求。
5. src/services/api.js: 学习如何封装 Axios，统一处理请求头（如 Token）和响应错误。

祝你学习愉快！