Vuetify Admin 后台管理系统

市面上也出现了很多的后台管理系统，不过大多都是基于element或者其他的ui框架，很少基于Vuetify做的后台管理系统，最近闲暇之余写了个基于 Vue 3 + TypeScript + Vite + Vuetify 构建的现代化后台管理系统，不过做的也是一版，也欢迎大家指正，持续完善，结尾附完整代码。

✨ 特性

🚀 现代技术栈: Vue 3 + TypeScript + Vite + Vuetify 3
🎨 美观界面: Material Design 设计风格
🔐 权限管理: 完整的 RBAC 权限控制体系
📱 响应式: 完美适配桌面端和移动端
🌙 主题切换: 支持明暗主题切换
🌍 国际化: 内置中英文支持
📊 数据可视化: 丰富的图表和统计功能
⚡ 高性能: 基于 Vite 的快速开发体验

🎯 功能模块

核心功能

用户认证与授权
用户管理
角色权限管理
系统监控与日志
数据统计面板
系统设置

界面特色

响应式布局设计
可折叠侧边栏导航
多标签页支持
面包屑导航
主题色彩自定义

🛠️ 技术栈

前端框架: Vue 3 (Composition API)
开发语言: TypeScript
构建工具: Vite
UI 组件库: Vuetify 3
状态管理: Pinia
路由管理: Vue Router 4
HTTP 客户端: Axios
图表库: ECharts
代码规范: ESLint + Prettier
工程化: 使用 Pnpm Monorepo、TurboRepo、Changeset 等工具，提高开发效率。

📋 项目结构

csharp 复制代码

vuetifyAdmin/
├── public/                 # 静态资源
├── src/
│   ├── api/               # API接口
│   ├── assets/            # 静态资源
│   ├── components/        # 通用组件
│   ├── composables/       # 组合式函数
│   ├── layouts/           # 布局组件
│   ├── plugins/           # 插件配置
│   ├── router/            # 路由配置
│   ├── stores/            # 状态管理
│   ├── styles/            # 样式文件
│   ├── types/             # TypeScript类型定义
│   ├── utils/             # 工具函数
│   ├── views/             # 页面组件
│   ├── App.vue            # 根组件
│   └── main.ts            # 入口文件
├── package.json
├── vite.config.ts
└── tsconfig.json

🚀 快速开始

环境要求

Node.js >= 20.0.0
pnpm >= 9.0.0

安装依赖

bash 复制代码

# 使用 pnpm 安装依赖
pnpm install

开发运行

bash 复制代码

# 启动开发服务器
pnpm dev

构建部署

bash 复制代码

# 构建生产版本
pnpm build

# 预览生产版本
pnpm preview

代码检查

bash 复制代码

# ESLint 检查
pnpm lint

# 格式化代码
pnpm format

📖 文档

产品需求文档 (PRD) - 详细的功能需求和技术规划
开发指南 - 开发规范和最佳实践
部署文档 - 生产环境部署指南

🎨 设计系统

主题配置

项目支持自定义主题配置，可以在 src/plugins/vuetify.ts 中修改主题色彩。

组件规范

遵循 Material Design 设计规范
使用 Vuetify 3 组件库
支持自定义组件扩展

🔧 开发规范

代码风格

使用 TypeScript 进行类型安全开发
遵循 ESLint + Prettier 代码规范
采用 Composition API 编写组件

提交规范

bash 复制代码

# 功能开发
git commit -m "feat: 添加用户管理功能"

# 问题修复
git commit -m "fix: 修复登录状态丢失问题"

# 文档更新
git commit -m "docs: 更新README文档"

📊 开发进度

🤝 贡献指南

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

开发流程

Fork 项目
创建功能分支 (git checkout -b feature/amazing-feature)
提交变更 (git commit -m 'feat: add amazing feature')
推送到分支 (git push origin feature/amazing-feature)
创建 Pull Request

项目地址: github.com/Fangxin9209...

⭐ 如果这个项目对你有帮助，请给我们一个星标！