# ayong_blog_pc_admin **Repository Path**: qinzhiyong2/ayong_blog_pc_admin ## Basic Information - **Project Name**: ayong_blog_pc_admin - **Description**: Vue 3 + TypeScript + Axios + Ant Design + Vue Router + Pinia 实现个人博客后台管理系统~ - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-09-16 - **Last Updated**: 2025-11-16 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 项目介绍 基于 Vue3 开发的个人博客网站后台管理系统 ~ 后端项目链接：[ayong_blog_pc_server](https://gitee.com/qinzhiyong2/ayong_blog_service) ## 技术栈 - Vue3、TypeScript、Ant Design Vue、Vue-Router、Pinia 等 ## 功能介绍 - 用户登录、退出登录 - 首页统计 ：展示文章总数、分类总数、标签总数、用户总数、评论总数等及可视化图表展示统计数据 - 文章管理：展示文章列表、新增、编辑、删除、详情展示 - 评论管理：展示评论列表、新增、编辑、删除 - 轮播图管理：展示轮播图列表、新增、编辑、删除 - 分类管理：展示分类列表、新增、编辑、删除 - 标签管理：展示标签列表、新增、编辑、删除 - 用户管理：展示用户列表、删除 - 菜单管理：展示菜单列表、新增、编辑、删除 - 操作日志：展示用户操作日志列表、删除、清空日志 - 系统设置：网站主题(暗黑/明亮)模式切换、布局模式(水平/垂直)切换、主题颜色选择、页面切换配置等等 ## 开发环境 - Node.js v22.12.0 - pnpm > v8.15.19 ## 安装与运行 1. 克隆项目到本地 ``` git clone https://gitee.com/qinzhiyong2/ayong_blog_pc_admin.git ``` 2. 安装依赖 ``` pnpm i ``` 3. 本地启动 ``` pnpm dev ``` 4. 打包项目 ``` pnpm build ``` ## 项目结构 ``` ├── ayong_blog_pc_admin # 项目名称 │ ├── public/ # 静态资源目录 │ ├── src/ # 源代码目录 │ │ ├── api # API 接口 │ │ ├── ├── request # API 请求拦截器封装 │ │ ├── assets # 静态资源 │ │ ├── components # 自定义公共组件 │ │ ├── hooks # 自定义hooks │ │ ├── layouts # 布局组件 │ │ ├── plugins # 自定义插件 │ │ ├── router # 路由配置 │ │ ├── store # 状态管理 │ │ ├── styles # 全局样式 │ │ ├── types # TS类型定义 │ │ ├── utils # 自定义工具函数 │ │ ├── views # 视图组件 │ │ ├── App.vue # 根组件 │ │ ├── main.ts # 入口文件 │ │ ├── permission.ts # 路由守卫权限控制 | ├── .env # 公共环境变量配置文件 | ├── .env.development # 开发环境变量配置文件 | ├── .env.production # 生产环境变量配置文件 │ ├── .gitignore # Git忽略文件 │ ├── index.html # 入口HTML文件 │ ├── package.json # 项目依赖配置文件 | ├── pnpm-lock.yaml # pnpm锁依赖版本文件 │ ├── README.md # 项目说明文档 │ ├── tsconfig.app.json # TypeScript配置文件 │ ├── tsconfig.json # TypeScript配置文件 │ ├── tsconfig.node.json # TypeScript配置文件 │ ├── uno.config.ts # UnoCSS配置文件 │ ├── vite.config.ts # Vite配置文件 ``` ## 项目依赖说明 | 依赖名称 | 版本号 | 说明 | | --------------------------- | ------- | --------------------- | | @ant-design/icons-vue | ^7.0.1 | ant-design-vue 图标库 | | @better-scroll/core | ^2.5.1 | 滑动组件 | | @vueuse/core | ^13.9.0 | vue 工具函数库 | | ant-design-vue | ^4.x | UI 组件库 | | axios | ^1.12.2 | 通信工具 | | js-cookie | ^3.0.5 | cookie 操作工具 | | jsencrypt | ^3.5.4 | 加密工具 | | md-editor-v3 | ^6.0.1 | Markdown 编辑器 | | nprogress | ^0.2.0 | 进度条组件 | | pinia | ^3.0.3 | 状态管理 | | pinia-plugin-persistedstate | ^4.5.0 | 持久化状态管理 | | v3-cropper | ^1.2.1 | 图片裁剪工具 | | vue | ^3.5.18 | Vue | | vue-color | ^3.3.2 | 颜色选择器组件 | | vue-router | ^4.5.1 | 路由 | | vue3-emoji-picker | ^1.1.8 | 表情选择器组件 | ## 项目依赖说明-开发环境 | 依赖名称 | 版本号 | 说明 | | ---------------------------- | ------- | -------------------------- | | @types/js-cookie | ^3.0.6 | js-cookie 类型定义 | | @types/node | ^24.4.0 | node 类型定义 | | @types/nprogress | ^0.2.3 | nprogress 类型定义 | | @vitejs/plugin-vue | ^6.0.1 | plugin-vue 类型定义 | | @vue/tsconfig | ^0.7.0 | tsconfig 类型定义 | | sass-embedded | ^1.92.1 | scss 构建工具 | | typescript | ^5.8.3 | TS | | unocss | ^66.5.1 | unocss 样式工具 | | unplugin-auto-import | ^20.1.0 | 自动导入 API 工具 | | unplugin-vue-components | ^29.0.0 | 自动导入 组件 工具 | | vite | ^7.1.2 | 构建工具 | | vite-plugin-vue-setup-extend | ^0.4.0 | 扩展 Vue 组件的 setup 函数 | | vue-tsc | ^3.0.5 | TypeScript 编译器 | ## 交流方式 - QQ：1355918353 - 邮箱：my1355918353@163.com ## 项目预览 - 明亮模式 ![首页](./src/assets/project-preview/light-1.jpg) ![系统设置](./src/assets/project-preview/light-2.png) ![新增文章](./src/assets/project-preview/light-3.png) ![文章详情](./src/assets/project-preview/light-4.png) - 暗黑模式 ![首页](./src/assets/project-preview/dark-1.png) ![系统设置](./src/assets/project-preview/dark-2.png) ![新增文章](./src/assets/project-preview/dark-3.png) ![文章详情](./src/assets/project-preview/dark-4.png)