README

Laravel Vue Blade 指令是什么？

最初由 Anthony Gore 的《使用 Vue.js 和 Laravel 模拟服务器端渲染》所启发 Faking Server-Side Rendering With Vue.js and Laravel by Anthony Gore，Laravel Vue Blade 指令包旨在提供构建静态 PHP 和 Vue 模板的工具。

这并不是为了取代完整的 SSR 应用程序，而是为了在 Blade 模板中方便地使用无卡顿的 Vue 组件。例如，一个动态更新的侧边栏组件，它首次加载时由 PHP 静态渲染。

相反的目标是能够在 blade 文件中编写一个组件，使用 @vueComponent(sidebar) 包含它，并且它能够动态地生成静态 PHP 和 vuejs 模板。这将然后在没有卡顿的情况下干净地注入到 Vue 实例中。

概念验证演示

原始 POC 仓库

安装

您可以通过 composer 安装此包

composer require lootmarket/laravel-vue-blade-component

提供者

然后，将 ServiceProvider 添加到您的 config/app.php 文件中

'providers' => [
    ...

    LootMarket\VueComponent\VueComponentServiceProvider::class

    ...
];

如何使用 Laravel Vue Blade 指令

指南

1. 简单的 Vue 实例
2. 使用 v-if && v-show 切换元素

文档

以下是一个非常轻量级的文档。请让我们知道您是否需要更详细的信息。

@vueComponent(<component-name>, <optional path>)

用于渲染我们的 Vue 组件的 Blade 指令。

component-name 要渲染的组件的文件名。

path 如果组件嵌套在子文件夹中，可选地提供组件的路径。

使用示例

@vueComponent(App)

this loads resources/views/App.blade.php

@vueComponent(App, vue/routes)

this loads resources/views/vue/routes/App.blade.php

通过 @vueComponent 加载的模板将带有 $vue 作为布尔值传递。此外，它们将被推送到名为 stack 的 vue

@vue(<jsVariable>, <phpVariable>)

用于在 dom 中显示 {{ variableFromVueJS }} 或 $phpVariable 编写的 Blade 指令。这用于 @vueComponent 文件中。

如果 $vue 为 true，将简单地输出传递的 php 变量。如果 $vue 为 false，将输出一个字符串，该字符串将在一个javascript模板中解释。

使用示例

@vue('$store.state.username', $initialState['username'])

当在 @vueComponent() 模板中使用时，它将返回

到 dom 的 <?php echo $initialState['username'] ?> 的结果。

到 js 模板的字符串 {{ $store.state.username }}。

这允许我们在 vue 模板中声明一个 Vuex 变量，并将初始状态输出到服务器端渲染的 php。

@v(<jsVariableString>)

一个简单的 blade 指令，用于获取一个字符串，并以 {{ string }} 的形式将其输出到 dom。这允许我们轻松地为我们的 vue 模板编写 js 变量。

这由 @vue 使用，但也可以直接调用，如果需要的话。

使用示例

@v($store.state.username)

这将简单地返回字符串 {{ $store.state.username }} 以供 vue 使用。

@stack('vue')

这是 Laravel 5.4 Blade 的一个原生函数 - 它将为传递给 @vueComponent() 的每个组件渲染 js 模板。

每个组件只渲染一次，而不是在循环中多次渲染。

关于 LootMarket

lootmarket 是一家位于加拿大安大略省多伦多的开发团队，专注于围绕电子竞技创造卓越体验。在追求终极 PHP & Vue 体验的过程中，我们创建了这个。

许可证

MIT 许可证（MIT）。请参阅 许可证文件 获取更多信息。