# vue3后台管理系统模板 **Repository Path**: carocall/template-vue ## Basic Information - **Project Name**: vue3后台管理系统模板 - **Description**: 一个基于vue的基础的后台管理项目，封装了pinia，vuerouter这些常用功能，自己也写了一些常见组件。界面也打磨了很久。并且有完善的ai开发提示词。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2026-02-25 - **Last Updated**: 2026-06-25 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # template-vue - Vue3后台管理系统模板 ## 项目简介 template-vue 是一个基于 Vue 3 构建的现代化后台管理系统模板。该项目采用最新的前端技术栈，提供了完整的后台管理系统基础功能，包括用户认证、权限管理、数据可视化、用户管理等模块。模板设计简洁美观，代码结构清晰，适合快速搭建企业级后台管理系统。 ## 功能特性 ### 🎯 核心功能 - **用户认证**：完整的登录、注册功能，支持路由守卫 - **权限管理**：基于角色的权限控制，动态菜单生成 - **主题切换**：支持亮色/暗色主题切换 - **响应式布局**：适配桌面端和移动端 - **多标签页**：支持多页面标签页管理 - **面包屑导航**：清晰的页面导航路径 ### 📊 数据可视化 - **图表展示**：集成 ECharts，支持多种图表类型（折线图、柱状图、饼图、散点图、雷达图、仪表盘） - **响应式图表**：图表自适应容器大小，支持窗口大小变化 - **组合图表**：支持柱状图与折线图组合展示 ### 👤 用户管理 - **个人信息**：完善的个人信息展示页面 - **用户管理**：用户列表、增删改查功能 - **头像上传**：支持用户头像上传和展示 ### 🎨 UI 特性 - **现代化设计**：简洁美观的界面设计 - **Element Plus**：基于 Element Plus UI 组件库 - **自定义主题**：支持 CSS 变量自定义主题色 - **动画效果**：平滑的页面过渡和交互动画 ## 技术栈 ### 核心框架 - **Vue 3** - 渐进式 JavaScript 框架 - **Vite** - 下一代前端构建工具 - **TypeScript** - JavaScript 超集（可选） ### UI 组件库 - **Element Plus** - 基于 Vue 3 的组件库 - **@element-plus/icons-vue** - Element Plus 图标库 ### 状态管理 - **Pinia** - Vue 官方推荐的状态管理库 - **pinia-plugin-persistedstate** - Pinia 状态持久化插件 ### 路由与请求 - **Vue Router 4** - Vue 3 官方路由 - **Axios** - HTTP 客户端库 ### 工具库 - **@vueuse/core** - Vue 组合式 API 工具集 - **ECharts** - 强大的图表可视化库 - **Sass** - CSS 预处理器 ## 项目结构 ``` template-vue/ ├── src/ │ ├── api/ # API 接口封装 │ │ └── user.js # 用户相关 API │ ├── assets/ # 静态资源 │ │ ├── icon/ # 图标资源 │ │ ├── image/ # 图片资源 │ │ └── vue.svg # Vue 图标 │ ├── components/ # 公共组件 │ │ ├── common/ # 通用组件 │ │ │ └── CommonPage.vue │ │ ├── table/ # 表格相关组件 │ │ │ ├── TableSearcher.vue │ │ │ └── pageBar.vue │ │ ├── FormDrawer.vue # 表单抽屉组件 │ │ └── ThemeButton.vue # 主题切换按钮 │ ├── layouts/ # 布局组件 │ │ ├── auth/ # 认证相关布局 │ │ │ └── AuthLayout.vue │ │ └── main/ # 主布局 │ │ ├── componenet/ # 布局组件 │ │ │ ├── AppTab.vue # 标签页 │ │ │ ├── Breadcrumb.vue # 面包屑 │ │ │ ├── ExpandButton.vue # 侧边栏展开按钮 │ │ │ ├── FullScreen.vue # 全屏切换 │ │ │ ├── GiteeIcon.vue # Gitee 图标 │ │ │ ├── GithubIcon.vue # GitHub 图标 │ │ │ ├── LoadingProgressBar.vue # 加载进度条 │ │ │ ├── SearchInput.vue # 搜索输入框 │ │ │ ├── SideLogo.vue # 侧边栏 Logo │ │ │ ├── SideMenu.vue # 侧边栏菜单 │ │ │ ├── ToogleTheme.vue # 主题切换 │ │ │ └── UserAvatar.vue # 用户头像 │ │ └── normal/ # 常规布局 │ │ ├── header/ # 头部组件 │ │ │ └── Navbar.vue │ │ ├── siderbar/ # 侧边栏组件 │ │ │ └── Siderbar.vue │ │ └── MainLayout.vue # 主布局组件 │ ├── router/ # 路由配置 │ │ └── index.js # 路由主文件 │ ├── stores/ # 状态管理 │ │ ├── siderbar.js # 侧边栏状态 │ │ ├── tab.js # 标签页状态 │ │ ├── theme.js # 主题状态 │ │ └── user.js # 用户状态 │ ├── utils/ # 工具函数 │ │ └── request.js # 请求封装 │ ├── views/ # 页面视图 │ │ ├── auth/ # 认证页面 │ │ │ ├── login/ # 登录页面 │ │ │ │ └── Login.vue │ │ │ └── register/ # 注册页面 │ │ │ └── Register.vue │ │ ├── component/ # 组件示例页面 │ │ │ └── Component.vue │ │ ├── error/ # 错误页面 │ │ │ └── NotFound.vue │ │ ├── graphic/ # 图表展示页面 │ │ │ └── Graphic.vue │ │ ├── home/ # 首页 │ │ │ └── Home.vue │ │ ├── person/ # 个人中心页面 │ │ │ └── Person.vue │ │ └── user/ # 用户管理页面 │ │ └── UserManage.vue │ ├── App.vue # 根组件 │ ├── main.js # 应用入口 │ └── style.css # 全局样式 ├── images/ # 项目截图 │ ├── 图表展示界面，菜单栏收起状态.png │ ├── 暗夜模式图表展示.png │ ├── 登录界面.png │ ├── 顶部tabbar.png │ └── 首页-暗夜模式.png ├── package.json # 项目依赖 └── README.md # 项目说明文档 ``` ## 安装与运行 ### 环境要求 - Node.js 16+ - npm 或 yarn 或 pnpm ### 安装依赖 ```bash # 使用 npm npm install # 使用 yarn yarn install # 使用 pnpm pnpm install ``` ### 开发环境运行 ```bash # 启动开发服务器 npm run dev # 访问地址 # http://localhost:5173 ``` ### 生产环境构建 ```bash # 构建生产版本 npm run build # 预览生产版本 npm run preview ``` ## 界面展示 ### 登录界面 ![登录界面](./images/登录界面.png) *简洁美观的登录界面，支持背景图片自定义* ### 首页（暗夜模式） ![首页-暗夜模式](./images/首页-暗夜模式.png) *暗色主题的首页界面，保护眼睛的同时提供良好的视觉体验* ### 图表展示界面 ![图表展示界面，菜单栏收起状态](./images/图表展示界面，菜单栏收起状态.png) *丰富的图表展示，支持多种图表类型和响应式布局* ### 暗夜模式图表展示 ![暗夜模式图表展示](./images/暗夜模式图表展示.png) *暗色主题下的图表展示，色彩适配主题模式* ### 顶部标签栏 ![顶部tabbar](./images/顶部tabbar.png) *多标签页管理，支持页面快速切换和关闭* ## 开发指南 ### 添加新页面 1. 在 `src/views` 目录下创建新的页面组件 2. 在 `src/router/index.js` 中添加路由配置 3. 在侧边栏菜单配置中添加对应的菜单项 ### 自定义主题 项目支持通过 CSS 变量自定义主题色，主要变量包括： ```css :root { --theme-color: #409eff; /* 主题色 */ --text: #6b6375; /* 文本颜色 */ --text-h: #08060d; /* 标题文本颜色 */ --bg: #ffffff; /* 背景色 */ --sub-bg: #f5f5f5; /* 次级背景色 */ --border: #e4e7ed; /* 边框颜色 */ --shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* 阴影 */ } ``` ### 图表使用 项目已集成 ECharts，使用示例： ```vue ``` ### API 请求封装 项目使用 Axios 进行 HTTP 请求，已封装统一的请求拦截器和响应处理器： ```javascript // 在组件中使用 import request from '@/utils/request'; // GET 请求 const getUserList = async () => { const response = await request.get('/api/users'); return response.data; }; // POST 请求 const createUser = async (userData) => { const response = await request.post('/api/users', userData); return response.data; }; ``` ## 状态管理 项目使用 Pinia 进行状态管理，主要 store 包括： ### 用户状态 (user.js) - 用户登录状态 - 用户信息 - 权限信息 ### 主题状态 (theme.js) - 当前主题模式（亮色/暗色） - 主题色配置 ### 侧边栏状态 (siderbar.js) - 侧边栏展开/收起状态 - 菜单激活状态 ### 标签页状态 (tab.js) - 当前打开的标签页 - 激活的标签页 ## 浏览器兼容性 - Chrome 80+ - Firefox 75+ - Safari 13+ - Edge 80+ ## 许可证 本项目基于 MIT 许可证开源，详情请查看 LICENSE 文件。 ## 贡献指南 1. Fork 本仓库 2. 创建功能分支 (`git checkout -b feature/AmazingFeature`) 3. 提交更改 (`git commit -m 'Add some AmazingFeature'`) 4. 推送到分支 (`git push origin feature/AmazingFeature`) 5. 开启 Pull Request ## 联系方式 如有问题或建议，请通过以下方式联系： - 提交 Issue - 发送邮件 --- **感谢使用 template-vue！** 🎉 如果这个项目对你有帮助，请给一个 ⭐️ 支持一下！