这是一个基于 Vue 3 + Vite + Element Plus 开发的个人博客系统。项目使用 Pinia 进行状态管理，并利用 LocalStorage 进行数据持久化，同时内置了 Mock 数据，模拟了完整的前后端交互体验。
- 用户系统: 支持用户注册、登录及个人资料管理（模拟认证），包含忘记密码功能。
- 文章管理: 支持文章的发布、编辑、查看（Markdown 渲染）和删除。
- 分类与标签: 完整的分类和标签管理功能，支持筛选文章。
- 评论功能: 文章详情页支持发表和查看评论。
- 数据持久化: 使用 LocalStorage 本地存储数据，刷新页面数据不丢失。
- 后台管理: 提供管理员视图 (
AdminView)，用于内容管理。 - SEO 与体验优化: 自动更新页面标题，适配不同分辨率。
- 数据模拟: 内置 Mock 数据支持 (
mockData.js)，方便开发调试。
- 核心框架: Vue 3
- 构建工具: Vite
- 状态管理: Pinia
- 持久化插件: Pinia Plugin Persistedstate
- 路由管理: Vue Router
- UI 组件库: Element Plus
- HTTP 请求: Axios
- Markdown 解析: Marked
src/
├── api/ # API 接口封装
├── assets/ # 静态资源
├── router/ # 路由配置
├── stores/ # Pinia 状态管理 (文章、分类、评论、标签、用户)
├── views/ # 页面组件
│ ├── backend/ # 后台管理相关页面
│ │ ├── AdminView.vue # 后台管理
│ │ └── UserProfileView.vue # 用户个人中心
│ └── frontend/ # 前台展示相关页面
│ ├── ArticleDetailView.vue # 文章详情
│ ├── CategoryView.vue # 分类页
│ ├── HomeView.vue # 首页
│ ├── LoginView.vue # 登录页
│ └── RegisterView.vue # 注册页
├── App.vue # 根组件
├── main.js # 入口文件
└── style.css # 全局样式
- Node.js >= 16.0.0
npm installnpm run devnpm run buildnpm run preview本项目主要用于演示 Vue 3 生态系统的使用。数据默认存储在浏览器的 LocalStorage 中。如果需要重置数据，可以清除浏览器缓存或手动清空 LocalStorage。