# my-website-frontend

**Repository Path**: thin-rain/my-website-frontend

## Basic Information

- **Project Name**: my-website-frontend
- **Description**: 基于 Vue3 + Vite 构建，使用 Element Plus 组件库，集成 Vue Router 实现单页路由，Pinia 管理状态，支持响应式布局和Markdown 渲染。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-11
- **Last Updated**: 2026-05-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# 我的网站前端

基于 Vue 3 + Vite 构建的个人网站与博客管理系统。

## 项目简介

这是一个功能完善的个人网站前端项目，包含面向用户的展示页面和后台管理系统。前台提供个人简介、博客文章、项目展示、技能展示、留言交流等功能；后台提供完整的内容管理、统计分析等功能。

## 技术栈

- **前端框架**: Vue 3
- **构建工具**: Vite
- **路由**: Vue Router
- **状态管理**: Pinia
- **HTTP 客户端**: Axios

## 项目结构

```
src/
├── api/                    # API 接口模块
│   ├── about.js           # 关于页接口
│   ├── blog.js            # 博客接口
│   ├── message.js         # 留言接口
│   ├── project.js         # 项目接口
│   └── skill.js           # 技能接口
├── assets/                # 静态资源
├── components/            # 公共组件
│   ├── Footer.vue         # 页脚
│   ├── Navbar.vue         # 导航栏
│   └── about/             # 关于页组件
│       ├── AdvantageGrid.vue
│       ├── EducationTimeline.vue
│       ├── ExperienceTimeline.vue
│       └── ProfileHeader.vue
├── composables/           # 组合式 API
│   └── useSEO.js          # SEO 配置
├── router/                # 路由配置
│   └── index.js
├── utils/                 # 工具函数
│   └── request.js         # HTTP 请求封装
├── views/                 # 页面视图
│   ├── Home.vue           # 首页
│   ├── About.vue          # 关于
│   ├── Blog.vue           # 博客列表
│   ├── BlogDetail.vue     # 博客详情
│   ├── Projects.vue       # 项目展示
│   ├── Skills.vue         # 技能展示
│   ├── Contact.vue        # 联系方式
│   ├── Message.vue        # 留言板
│   ├── Chat.vue           # 在线聊天
│   └── admin/             # 后台管理
│       ├── Login.vue
│       ├── Dashboard.vue
│       ├── DashboardHome.vue
│       ├── Articles.vue
│       ├── Categories.vue
│       ├── Messages.vue
│       ├── Projects.vue
│       ├── Personal.vue
│       ├── Settings.vue
│       └── Statistics.vue
├── App.vue
└── main.js
```

## 功能特性

### 前台展示

- **首页**: 个人简介与主要作品展示
- **关于页**: 个人优势、教育经历、工作经验时间线
- **博客**: 文章列表与详情页
- **项目**: 个人项目展示
- **技能**: 技术栈展示
- **留言**: 访客留言功能
- **聊天**: 在线即时通讯

### 后台管理

- **仪表盘**: 数据统计与概览
- **文章管理**: 发布、编辑、删除博客文章
- **分类管理**: 文章分类管理
- **项目管理**: 个人项目展示管理
- **留言管理**: 查看与处理访客留言
- **个人中心**: 管理员个人信息设置
- **系统设置**: 网站配置

## 安装与运行

```bash
# 安装依赖
npm install

# 开发环境运行
npm run dev

# 生产环境构建
npm run build
```

## 环境要求

- Node.js 16.x 或更高版本
- npm 7.x 或更高版本

## 页面预览

- 首页: `/`
- 关于: `/about`
- 博客: `/blog`
- 项目: `/projects`
- 技能: `/skills`
- 留言: `/message`
- 后台登录: `/admin/login`
- 管理后台: `/admin`

## 许可证

MIT License