README

为什么选择 Modular？

启动一个新的 Web 应用程序通常意味着需要处理一系列常见但至关重要的任务，包括

可扩展的架构：以可无缝扩展的方式构建应用程序结构。
强大的访问控制：精心构建细粒度的 ACL（访问控制列表）以高效管理用户和角色。
直观的仪表板：自定义现成的仪表板或开发定制的仪表板以简化应用程序的建设。
响应式设计：确保仪表板在设备上具有良好的移动友好性和响应性。
统一的 UI 工具包：采用或开发 UI 工具包以快速推动前端开发，同时保持页面设计的一致性。
轻松的前后端集成：直观地连接前后端，确保维护性和简单性。
优化的构建管理：利用正确的工具集和堆栈来高效管理前端应用程序的构建步骤。
可重用组件：将常见功能和组件抽象出来以供重用（拥抱 DRY - 不要重复自己），例如数据搜索、分页、闪存消息等。
全面的测试框架：实施测试框架以验证应用程序的功能。
详细的操作日志：记录详细日志以审计用户操作。
清晰的架构愿景：维护清晰的项目架构决策的思考模型，促进一致性和对所有元素如何相互关联的深入理解。

这些任务的复杂性远非微不足道，通常需要大量的时间和注意力。随着你深入探究，你可能会遇到更多的额外的小行为和调整，虽然看似微不足道，但却是关键且耗时的。

此外，更复杂的场景，如针对用户配置文件的多功能仪表板或复杂的业务规则，也可能出现，给项目增加复杂性。

Modular 通过提供结构良好、全面的解决方案来缓解这些障碍，让您能够专注于真正重要的事情——使您独特的应用程序得以实现。

为什么选择 VILT 堆栈（Vue、Inertia、Laravel、Tailwind）？

VILT 堆栈是框架和工具的强大组合，为构建 Web 应用程序提供坚实的基础。这些技术 协同工作得非常好，提供无缝的开发体验，使您能够专注于应用程序的核心功能。此外，在用不同的堆栈开发了各种大小和复杂性的项目后，我发现 VILT 堆栈非常灵活。它既能适应简单的 CRUD 应用程序，也能适应更复杂的 UI，增强了交互性和客户端重业务逻辑（交互式日历、动态表单字段、复杂图形等）。因此，它在两种情况下都能很好地扩展，对于小型简单应用程序和大型复杂应用程序都是一个可靠的选择。

关于 Modular

Modular 站在巨人的肩膀上，通过整合强大的框架和工具提供流畅的开发体验。以下是其内部结构

Vue 3（驱动自定义前端组件）
Inertia.js （连接前后端之间的桥梁）
Laravel 11 （赋能后端）
Tailwind CSS 3 （轻松样式化）
Vite （加速前端工具）

当您将Modular引入到您的Laravel应用程序中时，以下是一些您将解锁的亮点

一个与Tailwind CSS无缝集成的 主题化管理面板，随时准备帮助您构建应用程序。
一个经过精心调校的 ACL（访问控制列表）系统，轻松管理用户和角色。
一套自动加载的 自定义Vue 3组件，用 JavaScript 编写，并使用Tailwind CSS定制；可直接使用。
Vite，让您拥有 闪电般的快速前端开发之旅。
Inertia.js确保前端和后端之间的流畅连接，简化了路由和组件数据注入等功能，带来其他好处。
一个可快速生成新模块的 自定义CLI，推动您的 开发速度。
一个全面的 翻译系统，随时帮助您的应用程序说遍全球语言（如有需要）。
您的前端应用程序的 构建步骤 已设置，预配置，并从一开始就准备好，配备适当的工具和堆栈，以保持发展势头。
一个旨在在每一天的编码结束时让您笑逐颜开的 开发者体验 ;)

自定义Vue 3组件

在Modular的早期版本中，我利用了像Vuetify和Prime Vue这样的强大UI工具包。虽然这些是很好的选择，但希望对组件有更多控制的需求导致了改变，以下是一些指导方针

采用Vue 3作为主要的JavaScript框架。
使用Tailwind CSS进行样式化。
自定义Vue 3组件与Tailwind主题系统的无缝集成。
仅通过编辑组件即可轻松自定义组件。为了实现这一点，组件不在node_modules中，而是在"./resources/js/Components"中。需要一些调整？打开组件，修改Tailwind CSS类，然后保存。完成。
不使用Sass、Less、Stylus等。仅使用Tailwind CSS。
不使用TypeScript。仅纯JavaScript。
轻量级且极其简单的通用组件。如有必要，根据项目扩展或创建新的组件以增加额外功能。

目前，Modular提供了以下自定义Vue 3组件

./resources/js/Components
.
├── Auth
│   ├── AppAuthLogo.vue
│   └── AppAuthShell.vue
├── DataTable
│   ├── AppDataSearch.vue
│   ├── AppDataTable.vue
│   ├── AppDataTableData.vue
│   ├── AppDataTableHead.vue
│   ├── AppDataTableRow.vue
│   └── AppPaginator.vue
├── Form
│   ├── AppCheckbox.vue
│   ├── AppCombobox.vue
│   ├── AppFormErrors.vue
│   ├── AppInputDate.vue
│   ├── AppInputFile.vue
│   ├── AppInputPassword.vue
│   ├── AppInputText.vue
│   ├── AppLabel.vue
│   ├── AppRadioButton.vue
│   ├── AppTextArea.vue
│   ├── AppTipTapEditor.vue
│   └── TipTap
│       ├── TipTapButton.vue
│       ├── TipTapDivider.vue
│       └── extension-file-upload.js
├── Menu
│   ├── AppBreadCrumb.vue
│   ├── AppBreadCrumbItem.vue
│   ├── AppMenu.vue
│   ├── AppMenuItem.vue
│   └── AppMenuSection.vue
├── Message
│   ├── AppAlert.vue
│   ├── AppFlashMessage.vue
│   ├── AppToast.vue
│   └── AppTooltip.vue
├── Misc
│   ├── AppButton.vue
│   ├── AppCard.vue
│   ├── AppImageNotAvailable.vue
│   ├── AppLink.vue
│   ├── AppSectionHeader.vue
│   └── AppTopBar.vue
└── Overlay
    ├── AppConfirmDialog.vue
    ├── AppModal.vue
    └── AppSideBar.vue

每个组件都旨在与Modular无缝集成，确保尽可能简单的开发者体验。

文档

您可以在https://docs.ismodular.com找到Modular文档。

演示应用程序

您可以在https://demo.ismodular.com找到Modular演示应用程序。

以及演示应用程序的存储库：https://github.com/daniel-cintra/modular-demo。

路线图

您可以在https://docs.ismodular.com/roadmap.html找到Modular路线图。

贡献

在创建问题或拉取请求之前，请阅读并理解贡献指南。

许可证

Modular项目是开源软件，许可协议为MIT许可证。

danieldintra / modular

维护者

详细信息