vuetify-admin:基于Vue.js和Vuetify的SPA管理框架,支持REST API,快速构建响应式管理界面

SPA Admin Framework for Vue.js running on top of REST APIs and built on Vuetify

分支15Tags79
文件最后提交记录最后更新时间
5 年前
5 年前
5 年前
5 年前
5 年前
6 年前
6 年前
6 年前
6 年前
5 年前
5 年前
6 年前
5 年前
5 年前
5 年前
5 年前
5 年前
5 年前

Vuetify 管理框架

基于 Vue.js 的单页应用(SPA)管理框架,运行在 REST API 上,使用 Vuetify 构建,并带有专用的 Vue CLI 插件 加速开发。它可以与 Laravel 8 配合使用官方 Laravel Admin 包,但也可以与其他任何后端一起使用,只需自定义数据和身份验证提供程序。

查看 完整文档
浏览 在线演示 -> 进入管理员界面并使用预填充的登录信息(只读)
查看 教程 CodeSandbox -> 使用任意登录信息(假写入 API)
此项目深受 React Admin 启发,由出色的 Marmelab 团队 制作

演示

功能

  • 基于 Vuetify 强力驱动。
  • 🔌 完整独立的 响应式 SPA 管理界面,可适应 任何后端(REST, GraphQL, SOAP 等),通过编写符合特定契约的 自定义 数据身份验证 提供程序确保兼容性。
  • ⚡ 几乎 最小的 Vue.js 模板代码,采用领域特定语言(DSL)方法快速实现 CRUD 页面。
  • 🚀 提供 Vue CLI 插件,方便 立即快速入门,同时包含来自 Creative Tim 的精美材料主题。也可应用于任何基于 Vue.js 的应用程序。
  • 💝 全面支持 Vue CLI。Vuetify Admin 库只是一个插件,它无缝集成到所有现有的插件中,如 Vue Router, Vuex, Vue I18n 和 Vuetify。您可以像在 Vue CLI 基础项目上一样添加自定义路由、自定义存储模块和 Vuetify 主题,以保持对 Vue 应用的完全控制。
  • 👓 提供了一个使用了 Vuetify Admin 所有特性的 书店示例应用
  • 🗄 详尽的 完整文档
  • 🚀 多个教程,快速启动与 JSON ServerSymfony API PlatformLaravel 集成。
  • 内置用于 Laravel 的现成数据提供程序,与 Spatie Laravel 查询构建器 结合,以及适用于 API PlatformJSON Server 的 hydra。
  • 🚀 官方提供的单独 Laravel Admin 包,从头到尾提供了 极快的起步体验。提供许多后台功能,如 spa 身份验证、个人资料编辑、用户管理、模拟身份、多语言字段媒体支持、与 Wysiwyg 桥接的 文件管理器 等。允许您从后端到 UI 立即开始开发,拥有基础功能完备的管理界面。
  • 🔒 包含三个 身份验证提供程序: 推荐的 基于 cookie 的身份验证 适用于 Laravel Sanctum无状态 JWT 身份验证 (已测试与 Laravel JWT 配合),以及简单的 基本 HTTP 身份验证
  • 🔒 如果没有传递身份验证提供程序,则简单地支持 访客身份验证
  • ⛔ 提供 高级用户权限助手,用于根据需要隐藏或显示 UI 组件或菜单链接。
  • 尽可能减少魔法,充分尊重每个前后端开发环境。如果您熟悉 Laravel 和 Vue CLI 的基础知识,那么您已经准备好了!
  • 🚀 自动化的 猜测的 CRUD 页面,生成完整的 Vue.js 模板代码作为您自定义模板的起点。
  • 🚀 CRUD 代码生成命令 ,针对 Laravel 和 Vue CLI,以便更快地获取就绪的 API 和 UI 基础代码。
  • ⚡ 结合 Vuetify Admin、代码生成器以及 Vue.js 的强大能力,感受 生产力、愉快的开发体验和无限定制之间的完美平衡
  • 📝 对 Vetur 和 JetBrains 产品 中的所有 VA 组件提供完整智能感知支持!
  • 🌍 支持 国际化 通过 Vue I18n 实现,包括英语和法语翻译。可以轻松配置以跟随用户的浏览器语言。
  • 🌍 资源字段的翻译支持,在每个 CRUD 页面上根据所选语言切换。
  • 全面支持 可组合布局,带有可替换的 AppBar、Header、Footer、Sidebar 和Aside 区域。
  • 三种 提供组件 减少代码样板:列表展示表单
  • 许多 字段输入 组件,涵盖各种数据类型:选择、布尔值、数字、富文本 等。
  • 服务器端表单验证 支持。
  • 自动完成 输入,支持实体引用。
  • TinyMCE 5 作为默认 Wysiwyg 编辑器,带 elFinder 桥接,可以替换为您自己的编辑器。
  • 创建自定义 字段输入,只需扩展混入。
  • 具有 多排序、分页、全局搜索、高级过滤器基本 CSV 导出、实时查询字符串上下文 的全功能 数据表格。当然,还可以使用 单元格模板
  • 从数据表格中解耦的 数据迭代器,允许 完全自定义列表布局
  • 🔍 采用多种输入的 即时过滤器,例如:选择、布尔值、用于按关系搜索的自动完成,支持多个条件等。
  • 支持 批量操作
  • 行级、批量和全局操作可定制。
  • 对于简单的表单,可以从列表直接进行 侧边栏创建/编辑,而不必打开单独的 CRUD 页面。
  • 🍻 支持资源的 关联,处理关系。
  • 在数据表格中支持 行内编辑表单,用于快速创建和修改。
  • 支持具有拖放功能的 全编辑树视图,以处理层次结构数据。
  • 🤑 最后,但并非最不重要的是,它是 完全免费 的。

免责声明

本项目完全利用个人业余时间开发,并免费提供,故不承诺任何技术支持。目前仅旨在满足我个人项目需求。

这是一个阿尔法版本,尚未包含单元测试或持续集成(CI),因此可能存在大量错误(🐛)。请预期会有频繁的破坏性更改(💥),主要面向喜欢探索的冒险者!

若寻找具有良好支持和庞大社区的免费SPA管理库,强烈推荐更成熟、优化且全面测试的React Admin。商业用途上,可以考虑高度提升生产力且拥有优美SPA界面的Laravel Nova。对于寻求经典而高效的免费后台构建器,EasyAdmin是不错的选择。

架构

架构图

详细了解其工作原理,请访问这里

安装

选择最合适的指南:

关于主仓库

该仓库包含开发Vuetify Admin所需的所有项目,以及运行演示和教程:

  • Vuetify Admin Library:主要的后台管理库。
  • Vuetify Admin Vue CLI Plugin:关联的Vue CLI插件,包含了基础代码模板以实现快速安装和UI命令代码生成。
  • Laravel Admin:作为Composer包的子模块,便于在新的Laravel项目中使用,简化Vuetify Admin的集成并包括服务器端API命令生成器。
  • Bookstore Admin Demo:基于Vuetify Admin Library的全功能后台示例。
  • Bookstore Laravel Demo:适合Bookstore管理演示的Laravel后端API。
  • Admin Tutorial:完成的教程实例,根据专用文档,适合快速学习。
  • API Platform Tutorial:展示如何使用Hydra API提供商的完成示例。
  • Laravel Tutorial:展现YAML驱动开发优势的完成教程。
  • Vue CLI base:干净的基础Vuetify CLI项目启动器,用于测试VA Vue CLI插件的正确安装。
  • Docs:基于VuePress的文档。

这些项目通过Yarn工作区和Composer自动链接,提供了最佳的库开发体验。完全支持从演示到管理库的热模块替换(HMR)!

使用

如何运行教程

直接在CodeSandbox中运行教程即可!

如何本地运行演示

确保已使用Git子模块克隆此仓库,否则执行git submodule init && git submodule update单独的Laravel包应位于packages/laravel子文件夹下。

要求:

  • Yarn
  • Dockerdocker-compose,用于快速启动后端API。如不需要,可遵循特定说明
  • Make,便于启动所有必要工具。Windows用户可通过scoop安装,命令为scoop install make。使用make help查看所有详细命令。

要运行演示:

yarn # 安装所有Yarn依赖
make up-demo-laravel # 通过Docker运行服务器API(初次可能需要等待片刻...)
make prepare-demo-laravel # 初始化Laravel应用并注入模拟数据(仅首次启动时使用)
make run-demo # 启动带有HMR的书店演示后台管理的开发模式编译

管理员面板应自动启动于http://localhost:8080

运行与构建文档

文档由VuePress托管。使用make run-docshttp://localhost:9000启动它。make build-docs将在docs根目录生成静态文件。

所有VA组件的API文档通过Vue Docgen API自动生成于源代码中。

Laravel Admin

有一个辅助包,专为Laravel设计,旨在实现最快的开发启动体验,结合高效代码生成器,严格遵循传统Laravel方式创建CRUD资源。我还加入了类似Blueprint的基于YAML的代码生成器。

文档

Vuetify Admin的文档可以在Okami101网站找到。

许可证

本项目遵守MIT许可证开源。