SnowBlog Vue 前端

一个基于 Vue 3 + Vite 构建的现代化个人博客前端系统

📋 项目简介

SnowBlog Vue 是一个功能完整的个人博客前端应用，采用现代化的技术栈构建，提供了优雅的用户界面和流畅的用户体验。本项目是 SnowBlog 博客系统的前台展示部分。

✨ 功能特性

🏠 首页展示

• 全屏横幅展示
• 文章列表瀑布流布局
• 响应式设计适配各种设备

📖 文章系统

• 文章详情页面
• Markdown 渲染支持
• 代码高亮显示
• 文章归档按年份分组

🏷️ 分类标签

• 文章分类管理
• 标签云展示
• 分类/标签筛选文章

🔗 友情链接

• 友链展示页面
• 支持外部链接跳转

💻 技术特性

• Vue 3 Composition API
• 响应式路由导航
• 状态管理 (Pinia)
• 组件化开发
• TypeScript 支持准备

🛠️ 技术栈

核心框架

• Vue 3 - 渐进式 JavaScript 框架
• Vite - 下一代前端构建工具
• Vue Router 4 - 官方路由管理器
• Pinia - Vue 3 状态管理库

UI 组件库

• Element Plus - 基于 Vue 3 的组件库
• Element Plus Icons - 图标组件
• Lucide Vue Next - 现代图标库

工具库

• Axios - HTTP 客户端
• Marked - Markdown 解析器
• Highlight.js - 语法高亮
• GitHub Markdown CSS - Markdown 样式

📁 项目结构

SnowBlog-vue/
├── public/                 # 静态资源
│   ├── fulilian.jpg
│   ├── Nekoha.png
│   └── yuuki.jpg
├── src/
│   ├── assets/            # 项目资源文件
│   ├── axios/             # API 请求配置
│   │   ├── api.js         # API 接口定义
│   │   └── index.js       # Axios 配置
│   ├── components/        # 可复用组件
│   │   ├── ArticlesByYear.vue
│   │   ├── Banner.vue
│   │   ├── Markdown.vue
│   │   └── Layout/        # 布局组件
│   │       ├── Footer.vue
│   │       ├── Header.vue
│   │       └── index.vue
│   ├── router/            # 路由配置
│   │   ├── index.js
│   │   └── routes.js
│   ├── stores/            # 状态管理
│   │   └── index.js
│   ├── utils/             # 工具函数
│   │   └── urlUtils.js
│   ├── views/             # 页面组件
│   │   ├── Home.vue       # 首页
│   │   ├── About.vue      # 关于页面
│   │   ├── Archives.vue   # 归档页面
│   │   ├── ArticleDetail.vue  # 文章详情
│   │   ├── Categories.vue # 分类页面
│   │   ├── CategoryDetail.vue # 分类详情
│   │   ├── Tags.vue       # 标签页面
│   │   ├── TagDetail.vue  # 标签详情
│   │   ├── Links.vue      # 友链页面
│   │   └── NotFound.vue   # 404页面
│   ├── App.vue            # 根组件
│   └── main.js            # 入口文件
├── index.html             # HTML 模板
├── package.json           # 项目配置
├── vite.config.js         # Vite 配置
└── README.md              # 项目说明

🚀 快速开始

环境要求

• Node.js >= 16.0.0
• npm >= 8.0.0 或 yarn >= 1.22.0

安装依赖

# 使用 npm
npm install

# 或使用 yarn
yarn install

开发环境

# 启动开发服务器
npm run dev

# 或
yarn dev

访问 http://localhost:5173 查看应用

生产构建

# 构建生产版本
npm run build

# 或
yarn build

预览构建

# 预览生产构建
npm run preview

# 或
yarn preview

⚙️ 配置说明

API 代理配置

项目已配置开发环境 API 代理，默认代理到 http://localhost:9876

// vite.config.js
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:9876',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}

路由配置

项目使用 Vue Router 4 进行路由管理，支持以下页面：

• / - 首页
• /article/:title - 文章详情
• /archives - 文章归档
• /categories - 文章分类
• /categories/:categoryName - 分类详情
• /tags - 文章标签
• /tags/:tagName - 标签详情
• /about - 关于页面
• /links - 友情链接
• /404 - 404错误页面

🔗 相关项目

本项目是 SnowBlog 博客系统的一部分，完整系统包括：

• SnowBlog Vue (当前项目) - 前台展示系统
• SnowBlog Back - 后台管理系统
  • 项目地址：[https://github.com/SnowDreamXUE/SnowBlog-back]
• SnowBlog Java - 后端 API 服务
  • 项目地址：[https://github.com/SnowDreamXUE/SnowBlog-java]

📝 API 接口

项目已集成以下 API 接口：

文章相关

• GET /articles/list - 获取文章列表
• GET /articles/title - 根据标题获取文章
• GET /articles/archive - 获取文章归档

分类标签

• GET /categories/list - 获取分类列表
• GET /categories/info - 获取分类信息
• GET /tags/list - 获取标签列表
• GET /tags/info - 获取标签信息

友情链接

• GET /links/list - 获取友链列表

🎨 界面预览

主要特色

• 🌸 樱花主题设计风格
• 📱 完全响应式布局
• 🎭 优雅的动画效果
• 🌙 舒适的阅读体验
• 💫 现代化的 UI 设计

🤝 贡献指南

欢迎提交 Issue 和 Pull Request 来改进这个项目。

📄 开源协议

本项目基于 MIT 协议开源，详情请查看 LICENSE 文件。

👨‍💻 作者

SnowDreamXUE

---

⭐ 如果这个项目对你有帮助，欢迎给个 Star！