类似与vue与react的 PHP 的全栈开发框架Livewire来了

类似与vue与react的 PHP 的全栈开发框架Livewire来了

前端开发越来越复杂，从最初的写html文档到现在的基于webpack的vue与react开发方式，构建工具也是层出不穷，给前后端一起开发的全栈开发工程师出了难题，那么有没有一种新的方式实现vue与react类似的全栈开发方式呢，有，他就是Livewire，Livewire 是一个适用于 Laravel 的全栈框架，我们可以通过它来构建动态的前端功能，就像写原生 PHP 代码一样：

正如 Livewire 的 Slogan 一样，它就像 Vue 和 Blade 的孩子，有了它之后，可以抛开 Vue/React 之类的 JavaScript 框架，只需要在 PHP 服务端和 Blade 视图模板文件中，通过 PHP 代码即可完成前端视图组件的开发，和我们之前通过 Vue 实现的视图组件功能一样。

Livewire快速上手

下面我们来体验下如何通过 Livewire 开发前端视图组件。

首先通过 Composer 在项目根目下安装这个扩展包：

composer require calebporzio/livewire -vvv

然后在使用 Livewire 的页面中通过 @livewireAssets 指令引入对应的 JavaScript 代码，通常我们会在公共的布局文件中引入，比如 layouts.app：

...

@livewireAssets
</body>
</html>

创建组件

接下来我们通过如下 Artisan 命令来创建一个新的视图组件：

php artisan make:livewire counter

初次执行 make:livewire 命令会在 Laravel 项目的 app/Http 目录下创建一个 Livewire 子目录，用于存放组件逻辑服务端实现代码类，然后在该目录下创建 counter 对应组件类 Counter：

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public function render()
    {
        return view('livewire.counter');
    }
}

默认只有一个方法 render 用于指定对应的组件路径。

此外该命令还会在 resources/views 目录下创建一个 livewire 子目录用于存放 Livewire 组件（就像之前编写 Vue 组件要在 resources/js/components 目录下创建组件文件那样），显然本次生成的是 counter.blade.php，默认什么也不做：

<div>

{{-- The Master doesn't talk, he acts. --}}

</div>

我们可以将其改为一段欢迎文本：

<div>
    <h1>Hello Livewire!<h1>
</div>

点击查看剩余70%