使用Laravel Splade编写单页应用程序

人生(杂谈)  /  管理员 发布于 1年前   358

Laravel Splade 由 Pascal Baljet 创建，是使用 Laravel Blade 模板构建单页面应用程序 (SPA) 

的超级简便方法。通过 Splade，你可以轻松创建现代、动态的网络应用程序，使用起来得心应手。

官方视频：

https://www.youtube.com/embed/9V9BUHtvwXI?si=ITS5R0e0LLUlutts

ps:

有兴趣的自行想办法查阅。

Splade 提供了有用的 Blade 组件，这些组件通过开箱即用的无渲染 Vue 3 组件

（如 <Link /> Component 组件）得到了增强。

https://splade.dev/docs/x-link

它提供了类似 SPA 的感觉，但你也可以使用 Blade，并在需要时加入交互式 Vue 组件。

如您所见，在默认安装中，<链接 /> 组件通过 XHR 获取页面数据，并提供 SPA 的快感，

而无需重新加载整个页面。

您可以同时使用 Blade 和 Vue 标记。

下面是 Splade 的 <Toggle /> 组件示例。

https://splade.dev/docs/x-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）

来提高应用程序的性能。

https://splade.dev/docs/custom-vue-components

如果你还想使用 Laravel Breeze 或 Laravel Jetstream，Splade 会为两者提供入门套件，
Splade 还提供了实用的开箱组件，无论是否使用入门套件，你都可以快速上手：

Forms
Links
Events
Flash
Modals
Table
Teleport
Toggle
Transition

最后

你可以通过查看 splade.dev 上的主页和相关文档，您可以快速入门 Splade。

https://splade.dev/

还可以深入了解 Splade 的工作原理。

https://splade.dev/docs/how-splade-works