DVHA

Appearance

概况 ​

什么是 DVHA？ ​

DVHA (Dux Vue Headless Admin) 是一个基于 Vue 3 的无头（Headless）中后台前端开发框架，专为 CRUD 密集型 Web 应用程序而设计。它涵盖了广泛的企业用例，包括内部工具、管理面板、仪表板和 B2B 应用程序。

DVHA 的核心 hooks 和组件通过为项目的关键方面提供行业标准解决方案来简化开发过程，包括认证、访问控制、路由、数据处理、状态管理和多管理端支持。

DVHA 的无头架构通过将业务逻辑与 UI 和路由解耦，支持构建高度可定制的应用程序。这允许与以下内容集成：

  • 任何自定义设计或 UI 框架，如 TailwindCSS、UnoCSS 等
  • Vue 生态的主流 UI 框架：Element Plus、Naive UI 等，提供专门的增强包支持
  • 各种平台，包括 Vite、Nuxt.js、Electron 等，通过简单的配置，无需额外的设置步骤

为什么选择 DVHA？ ​

在广泛的开发方法中，DVHA 占据了传统开发方法"从头开始"和低代码/无代码解决方案之间的独特最佳位置。两种极端方法在开发初期都有各自的优势，但可能存在长期风险：

尽管提供了终极级别的灵活性，"从头开始"方法可能会导致：

  • 项目延期
  • 技术债务
  • 维护问题
  • 缺乏开发和安全最佳实践
  • 代码库污染
  • 团队间缺乏标准化

低代码/无代码解决方案解决了这个缺点，但创建了一系列新的挑战，例如：

  • 供应商锁定
  • 缺乏定制和样式选项
  • 糟糕的开发体验
  • 对复杂用例的支持有限

DVHA 汲取了两个世界的精华，在不影响灵活性、敏捷性和开放技术的情况下，缓解了"从头开始"开发的所有风险。

DVHA 架构概览 ​

DVHA 基于模块化架构，核心功能被拆分为独立的提供者和钩子：

┌─────────────────────────────────────────────────────────────┐
│                        应用层                                 │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐          │
│  │   主管理端   │  │  商户管理端  │  │  其他管理端  │          │
│  └─────────────┘  └─────────────┘  └─────────────┘          │
└─────────────────────────────────────────────────────────────┘
                              │
┌─────────────────────────────────────────────────────────────┐
│                    @duxweb/dvha-core 核心层                         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐          │
│  │    路由     │  │   状态管理   │  │   用户认证   │          │
│  └─────────────┘  └─────────────┘  └─────────────┘          │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐          │
│  │   数据处理   │  │   配置中心   │  │   UI Hook   │          │
│  └─────────────┘  └─────────────┘  └─────────────┘          │
└─────────────────────────────────────────────────────────────┘
                              │
┌─────────────────────────────────────────────────────────────┐
│                       胶水层 (可选)                           │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐          │
│  │@duxweb/dvha-elementui│ │@duxweb/dvha-naiveui │  │  自定义适配   │          │
│  └─────────────┘  └─────────────┘  └─────────────┘          │
└─────────────────────────────────────────────────────────────┘
                              │
┌─────────────────────────────────────────────────────────────┐
│                    UI 框架层 (随意搭配)                       │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐          │
│  │ Element Plus│  │  Naive UI   │  │ TailwindCSS │          │
│  └─────────────┘  └─────────────┘  └─────────────┘          │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐          │
│  │   UnoCSS    │  │   Quasar    │  │   其他框架   │          │
│  └─────────────┘  └─────────────┘  └─────────────┘          │
└─────────────────────────────────────────────────────────────┘

技术栈 ​

DVHA 基于现代化的 Vue 3 生态系统构建：

核心技术 ​

  • Vue 3 - 现代化的渐进式框架
  • TypeScript - 完整的类型支持
  • Pinia - 状态管理，支持持久化存储
  • Vue Router 4 - 路由管理和导航守卫
  • TanStack Query - 强大的数据获取和缓存
  • VueUse - Vue 组合式 API 工具集

开发工具 ​

  • Vite - 现代化构建工具
  • UnoCSS - 原子化 CSS 引擎
  • Axios - HTTP 客户端
  • Lodash-ES - 实用工具库

UI 框架集成 ​

  • 胶水层增强包：
    • @duxweb/dvha-elementui - Element Plus 的 DVHA 适配层
    • @duxweb/dvha-naiveui - Naive UI 的 DVHA 适配层
  • 原生支持的UI框架：
    • Element Plus、Naive UI、Quasar 等组件库
    • TailwindCSS、UnoCSS 等原子化 CSS 框架
    • 任何 Vue 3 兼容的 UI 框架

使用场景 ​

DVHA 在处理数据密集型应用程序（如管理面板、仪表板和内部工具）时表现出色。

典型应用场景包括：

  • 企业管理系统：用户管理、权限管理、数据统计等
  • 电商后台：商品管理、订单处理、库存管理等
  • 内容管理系统：文章管理、媒体库、分类管理等
  • 数据仪表板：业务指标展示、报表生成、数据分析等
  • 多租户应用：SaaS 平台、多商户系统等

关键特性 ​

  • 🎨 UI 框架无关 - 可与任何 Vue 生态的 UI 框架集成，提供专门的增强包
  • 🏢 多管理端支持 - 内置多租户架构，支持构建多个独立的管理端应用
  • 🔑 统一认证 - 完整的用户认证流程，包括登录、注册、权限验证等
  • 📊 强大的数据处理 - 基于 TanStack Query 的数据 hooks，支持缓存、乐观更新等
  • 💾 状态管理 - 基于 Pinia 的状态管理，支持持久化存储
  • 🧭 路由管理 - 基于 Vue Router 的路由管理，支持权限控制和路由守卫
  • ⚙️ 配置中心 - 统一的应用配置管理
  • 📺 UI Hook - 针对主流 UI 库提供专门的 hook 来轻松整合数据交互
  • 📘 完整的 TypeScript 支持 - 全面的类型提示和类型安全

核心 Hooks ​

DVHA 提供了丰富的 hooks 来简化开发：

数据操作 ​

  • useList - 获取列表数据，支持分页、筛选、排序
  • useOne - 获取单条数据
  • useMany - 获取多条数据
  • useInfiniteList - 无限滚动列表
  • useCreate / useCreateMany - 创建数据
  • useUpdate / useUpdateMany - 更新数据
  • useDelete / useDeleteMany - 删除数据
  • useCustom / useCustomMutation - 自定义请求

认证系统 ​

  • useLogin - 用户登录
  • useLogout - 用户登出
  • useCheck - 认证检查
  • useRegister - 用户注册
  • useForgotPassword - 忘记密码
  • useUpdatePassword - 更新密码

其他功能 ​

  • useManage - 获取当前管理端信息
  • useClient - 获取数据客户端
  • useInvalidate - 缓存失效管理

社区 ​

DVHA 拥有非常友好的社区，我们随时乐意帮助您入门：

  • 🌟 加入我们的 QQ 群或微信群获得社区支持
  • 📖 查看我们的 GitHub 仓库 了解最新更新
  • 💬 在 GitHub Discussions 中提出任何关于 DVHA 项目的问题或给出反馈
  • 🤝 了解如何为 DVHA 项目做贡献