编程

使用 Laravel Splade 编写单页应用

662 2023-12-09 01:29:00

Laravel Splade 由 Pascal Baljet 创建,是一个使用 Larave Blade 模板创建单页应用(SPA) 的超级简单方式。Splade 使得创建现代、动态 web 应用更为简单,使用很愉快。

Splade 提供了有用的 Blade 组件,这些组件通过开箱即用的无渲染 Vue 3 组件进行了增强,例如 <Link/> 组件。它提供了类似 SPA 的感觉,但您可以使用 Blade,在需要时添加交互式 Vue 组件。

正如您所看到的,在默认安装中,<Link /> 组件通过 XHR 获取页面数据,并在不重新加载整个页面的情况下提供 SPA 的快速感觉。

您可以同时使用 Blade 和 Vue 标记。以下是 Splade 的<Toggle/>组件中的一个示例。请注意 Vue 中的 v-show 指令和 @click 监听器,以及特定于 Blade 的组件和变量用法 {{ }}

<x-splade-toggle>
    <div v-show="toggled">{{ $blog->full_content }}</div>
 
    <div v-show="!toggled">
        <p>{{ $blog->excerpt }}</p>
        <button @click="toggle">Expand</button>
    </div>
</x-splade-toggle>

如果您需要自定义 Vue 组件,Splade 会支持您,您甚至可以利用服务器端渲染(SSR)来提高应用程序的性能。

如果您也想使用 Laravel Breeze 或 Laravel Jetstream,Splade 为这两款产品提供入门套件。Splade 还提供了开箱即用的有用组件,无论是否使用入门套件,您都可以使用这些组件快速入门:

  • Forms
  • Links
  • Events
  • Flash
  • Modals
  • Table
  • Teleport
  • Toggle
  • Transition
  • 等等!

您可以查看 Splade.dev 上的主页和随附文档,快速开始使用 Splade。您还可以深入了解 Splade 是如何在底层工作的。