Weblog Vue3 项目架构深度分析

📋 项目概述

Weblog Vue3 是一个基于 Vue 3 构建的现代化博客系统，采用前后端分离架构。项目包含博客前台展示和后台管理两大模块，提供完整的博客内容管理解决方案。

🎯 核心特性

🚀 基于 Vue 3 + Composition API 的现代化前端架构
🎨 响应式设计，支持移动端和桌面端
📝 富文本编辑器支持 Markdown
🔐 完整的权限管理和用户认证系统
📊 数据可视化仪表盘
🎭 动画效果和交互体验优化

🏗️ 技术栈

核心框架

Vue 3.5.13 - 渐进式 JavaScript 框架
Vue Router 4.5.0 - 官方路由管理器
Pinia 3.0.1 - 新一代状态管理库

UI 框架与样式

Element Plus 2.3.9 - Vue 3 组件库
Tailwind CSS 3.4.17 - 原子化 CSS 框架
Flowbite 1.8.1 - Tailwind CSS 组件库
Animate.css 4.1.1 - CSS 动画库
GSAP 3.13.0 - 高性能动画库

功能增强

Axios 1.8.1 - HTTP 客户端
ECharts 5.6.0 - 数据可视化图表库
md-editor-v3 5.4.5 - Markdown 编辑器
highlight.js 11.11.1 - 代码高亮
ViewerJS 1.11.7 - 图片查看器
NProgress 0.2.0 - 页面加载进度条

开发工具

Vite 6.1.0 - 现代化构建工具
unplugin-auto-import - 自动导入
unplugin-vue-components - 组件自动导入
PostCSS + Autoprefixer - CSS 后处理

📁 项目结构

weblog-vue3/
├── public/                 # 静态资源
│   └── favicon.ico
├── src/
│   ├── api/               # API 接口层
│   │   ├── admin/         # 后台管理 API
│   │   └── frontend/      # 前台展示 API
│   ├── assets/            # 静态资源
│   │   ├── base.css       # 基础样式
│   │   ├── main.css       # 主样式文件
│   │   └── *.svg          # SVG 图标
│   ├── components/        # 公共组件
│   │   ├── CountTo.vue    # 数字动画组件
│   │   └── FormDialog.vue # 表单对话框组件
│   ├── composables/       # 组合式函数
│   │   ├── auth.js        # 认证相关
│   │   ├── useTagList.js  # 标签列表逻辑
│   │   └── utils.js       # 工具函数
│   ├── layouts/           # 布局组件
│   │   └── admin/         # 后台布局
│   ├── pages/             # 页面组件
│   │   ├── admin/         # 后台管理页面
│   │   └── frontend/      # 前台展示页面
│   ├── router/            # 路由配置
│   │   └── index.js
│   ├── stores/            # 状态管理
│   │   ├── main.js        # Pinia 配置
│   │   ├── user.js        # 用户状态
│   │   ├── menu.js        # 菜单状态
│   │   ├── tagList.js     # 标签页状态
│   │   └── blogsettings.js # 博客设置状态
│   ├── utils/             # 工具类
│   │   └── request.js     # HTTP 请求封装
│   ├── App.vue            # 根组件
│   ├── main.js            # 应用入口
│   └── permission.js      # 路由权限控制
├── index.html             # HTML 模板
├── package.json           # 项目配置
├── vite.config.js         # Vite 配置
├── tailwind.config.js     # Tailwind 配置
└── postcss.config.js      # PostCSS 配置

🔧 核心架构设计

1. 状态管理架构 (Pinia)

项目采用 Pinia 作为状态管理解决方案，具有以下特点：

模块化设计：按功能划分不同的 store
持久化存储：使用 pinia-plugin-persistedstate 插件
类型安全：基于 Composition API 的响应式状态

主要 Store 模块：

useUserStore - 用户信息和认证状态
useMenuStore - 菜单展开/收起状态
useTagListStore - 标签页管理
useBlogSettingsStore - 博客全局设置

2. 路由架构 (Vue Router)

采用 Hash 模式路由，支持前台和后台双模块：

前台路由：

/ - 首页
/article/:articleId - 文章详情
/category/list - 分类列表
/tag/list - 标签列表
/archive/list - 归档列表

后台路由：

/admin/index - 仪表盘
/admin/article/* - 文章管理
/admin/category/list - 分类管理
/admin/tag/list - 标签管理
/admin/blog/setting - 博客设置

3. API 接口架构

分层设计：

api/
├── admin/          # 后台管理接口
│   ├── article.js  # 文章管理
│   ├── category.js # 分类管理
│   ├── tag.js      # 标签管理
│   ├── user.js     # 用户管理
│   └── dashboard.js # 仪表盘数据
└── frontend/       # 前台展示接口
    ├── article.js  # 文章展示
    ├── category.js # 分类展示
    └── tag.js      # 标签展示

HTTP 请求封装特性：

统一的请求/响应拦截器
自动 Token 注入
错误处理和消息提示
401 自动登出处理

4. 组件架构

布局组件：

Admin.vue - 后台主布局（侧边栏 + 头部 + 内容区）
支持菜单收起/展开
标签页导航
KeepAlive 组件缓存

公共组件：

CountTo.vue - 数字滚动动画
FormDialog.vue - 表单弹窗
图表组件（基于 ECharts）

🔐 权限管理系统

认证机制

Token 认证：基于 JWT Token
Cookie 存储：使用 @vueuse/integrations/useCookies
自动刷新：Token 过期自动跳转登录

路由守卫

// permission.js
router.beforeEach((to, from, next) => {
  // 显示页面加载动画
  showPageLoading();
  
  let token = getToken();
  
  // 后台路由权限检查
  if (!token && to.path.startsWith("/admin")) {
    ElMessage.warning("请先登录");
    next({ path: "/login" });
  }
  // 已登录用户访问登录页重定向
  else if (token && to.path.startsWith("/login")) {
    next({ path: "/admin/index" });
  }
  // 前台路由加载博客设置
  else if (!to.path.startsWith("/admin")) {
    let bolgSettingsStore = useBlogSettingsStore();
    bolgSettingsStore.getBlogSettings();
    next();
  }
  else {
    next();
  }
});

🎨 样式架构

CSS 架构

Tailwind CSS：原子化 CSS 框架，提供快速样式开发
Element Plus：组件库样式
自定义 CSS：base.css 和 main.css 提供基础样式

主题系统

支持明暗主题切换
CSS 变量定义颜色系统
响应式设计适配

🚀 构建与开发

Vite 配置特性

开发服务器代理：/api 代理到 http://localhost:8080
自动导入：Element Plus 组件和 API 自动导入
路径别名：@ 指向 src 目录
Vue DevTools：开发调试工具

性能优化

组件懒加载：路由级别的代码分割
KeepAlive 缓存：页面组件缓存（最多10个）
图片懒加载：ViewerJS 图片查看器
进度条：NProgress 页面加载提示

📊 数据可视化

仪表盘功能

统计卡片：文章数、分类数、标签数、PV 访问量
发布日历：文章发布热力图
访问趋势：近一周 PV 访问量折线图
数字动画：CountTo 组件实现数字滚动效果

🔧 开发规范

代码规范

组合式 API：统一使用 Vue 3 Composition API
响应式数据：使用 ref 和 reactive
模块化导入：ES6 模块系统
类型安全：JSConfig 配置支持

项目规范

目录结构：按功能模块划分
命名规范：驼峰命名和短横线命名
组件设计：单一职责原则
状态管理：集中式状态管理

🚀 部署与运行

开发环境

npm run dev    # 启动开发服务器

生产构建

npm run build  # 构建生产版本
npm run preview # 预览生产版本

环境要求

Node.js 16+
现代浏览器支持 ES6+
后端 API 服务（Java Spring Boot）

📈 项目优势

现代化技术栈：Vue 3 + Vite + Pinia 的最新技术组合
完整的功能模块：前台展示 + 后台管理的完整解决方案
优秀的用户体验：动画效果、响应式设计、加载优化
可维护性强：模块化架构、清晰的代码结构
扩展性好：组件化设计、插件化架构

🔮 技术亮点

自动导入机制：减少重复导入代码
组件缓存策略：提升页面切换性能
权限控制完善：多层级权限验证
状态持久化：用户体验优化
错误处理机制：统一的错误处理和用户提示

这个项目展现了现代 Vue.js 应用的最佳实践，是学习和参考 Vue 3 项目架构的优秀案例。

Name		Name	Last commit message	Last commit date
Latest commit History 65 Commits
.cursor/rules		.cursor/rules
.vscode		.vscode
public		public
src		src
.gitignore		.gitignore
README.md		README.md
index.html		index.html
jsconfig.json		jsconfig.json
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
vite.config.js		vite.config.js

836145715/weblog-vue3

Folders and files

Latest commit

History

Repository files navigation