前端#

• 简介
• 使用 PHP
  • PHP 和 Blade
  • Livewire
  • 入门套件
• 使用 Vue / React
  • Inertia
  • 入门套件
• 打包资源

简介#

Laravel 是一个后端框架，它提供了构建现代 Web 应用程序所需的所有功能，如 路由、验证、缓存、队列、文件存储等。我们更致力于为开发者打造卓越的全栈体验，提供强大的前端构建方案。

在使用 Laravel 构建应用程序时，有两种主要的前端开发方式，选择哪种方式取决于你是想利用 PHP 构建前端，还是使用 Vue 和 React 等 JavaScript 框架。我们将在下面详细解析两种方案，助你根据应用场景作出最优选。

使用 PHP#

PHP 和 Blade#

过去，大多数 PHP 应用程序使用简单的 HTML 模板与 PHP echo 语句混合，来渲染从数据库中检索到的数据的：

<div>
    <?php foreach ($users as $user): ?>
        Hello, <?php echo $user->name; ?> <br />
    <?php endforeach; ?>
</div>Copy

在 Laravel 中，这种方法可以通过使用视图和 Blade 来实现。Blade 模板引擎语法简洁，支持优雅的数据绑定与循环控制：

<div>
    @foreach ($users as $user)
        Hello, {{ $user->name }} <br />
    @endforeach
</div>Copy

Trace92 翻译于 1 天前

0 重译

在这种方式下构建应用程序时，表单提交和其他页面交互通常会从服务器接收一个全新的 HTML 文档，整个页面会由浏览器重新渲染。即使在今天，许多应用程序仍然适合通过简单的 Blade 模板构建其前端。

不断提高的期望#

其他人则更喜欢使用他们熟悉的后端语言，开发出可利用他们首选的后端语言构建现代 Web 应用程序 UI 的解决方案。例如，在 Rails 生态系统中，这促使了诸如 Turbo、Hotwire 和 Stimulus 等库的创建。

在 Laravel 生态系统中，主要使用 PHP 来创建现代动态前端的需求催生了 Laravel Livewire 和 Alpine.js 的诞生。

Livewire#

Laravel Livewire 是一个用于构建 Laravel 驱动的前端框架，它让前端感觉像使用现代 JavaScript 框架（如 Vue 和 React）构建的一样动态、现代和生动。

使用 Livewire 时，你将创建 Livewire 「组件」，这些组件渲染用户界面的一个独立部分，并暴露可以从应用程序前端调用和交互的方法和数据。例如，一个简单的「计数器」组件可能如下所示：

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}Copy

Trace92 翻译于 1 天前

0 重译

And, the corresponding template for the counter would be written like so:

<div>
    <button wire:click="increment">+</button>
    <h1>{{ $count }}</h1>
</div>Copy

As you can see, Livewire enables you to write new HTML attributes such as wire:click that connect your Laravel application's frontend and backend. In addition, you can render your component's current state using simple Blade expressions.

For many, Livewire has revolutionized frontend development with Laravel, allowing them to stay within the comfort of Laravel while constructing modern, dynamic web applications. Typically, developers using Livewire will also utilize Alpine.js to "sprinkle" JavaScript onto their frontend only where it is needed, such as in order to render a dialog window.

If you're new to Laravel, we recommend getting familiar with the basic usage of views and Blade. Then, consult the official Laravel Livewire documentation to learn how to take your application to the next level with interactive Livewire components.

Starter Kits#

If you would like to build your frontend using PHP and Livewire, you can leverage our Livewire starter kit to jump-start your application's development.

Using React or Vue#

Although it's possible to build modern frontends using Laravel and Livewire, many developers still prefer to leverage the power of a JavaScript framework like React or Vue. This allows developers to take advantage of the rich ecosystem of JavaScript packages and tools available via NPM.

However, without additional tooling, pairing Laravel with React or Vue would leave us needing to solve a variety of complicated problems such as client-side routing, data hydration, and authentication. Client-side routing is often simplified by using opinionated React / Vue frameworks such as Next and Nuxt; however, data hydration and authentication remain complicated and cumbersome problems to solve when pairing a backend framework like Laravel with these frontend frameworks.

In addition, developers are left maintaining two separate code repositories, often needing to coordinate maintenance, releases, and deployments across both repositories. While these problems are not insurmountable, we don't believe it's a productive or enjoyable way to develop applications.

Inertia#

Thankfully, Laravel offers the best of both worlds. Inertia bridges the gap between your Laravel application and your modern React or Vue frontend, allowing you to build full-fledged, modern frontends using React or Vue while leveraging Laravel routes and controllers for routing, data hydration, and authentication — all within a single code repository. With this approach, you can enjoy the full power of both Laravel and React / Vue without crippling the capabilities of either tool.

After installing Inertia into your Laravel application, you will write routes and controllers like normal. However, instead of returning a Blade template from your controller, you will return an Inertia page:

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Inertia\Inertia;
use Inertia\Response;

class UserController extends Controller
{
    /**
     * Show the profile for a given user.
     */
    public function show(string $id): Response
    {
        return Inertia::render('users/show', [
            'user' => User::findOrFail($id)
        ]);
    }
}Copy

An Inertia page corresponds to a React or Vue component, typically stored within the resources/js/pages directory of your application. The data given to the page via the Inertia::render method will be used to hydrate the "props" of the page component:

import Layout from '@/layouts/authenticated';
import { Head } from '@inertiajs/react';

export default function Show({ user }) {
    return (
        <Layout>
            <Head title="Welcome" />
            <h1>Welcome</h1>
            <p>Hello {user.name}, welcome to Inertia.</p>
        </Layout>
    )
}Copy

As you can see, Inertia allows you to leverage the full power of React or Vue when building your frontend, while providing a light-weight bridge between your Laravel powered backend and your JavaScript powered frontend.

Server-Side Rendering#

If you're concerned about diving into Inertia because your application requires server-side rendering, don't worry. Inertia offers server-side rendering support. And, when deploying your application via Laravel Cloud or Laravel Forge, it's a breeze to ensure that Inertia's server-side rendering process is always running.

Starter Kits#

If you would like to build your frontend using Inertia and Vue / React, you can leverage our React or Vue application starter kits to jump-start your application's development. Both of these starter kits scaffold your application's backend and frontend authentication flow using Inertia, Vue / React, Tailwind, and Vite so that you can start building your next big idea.

Bundling Assets#

Regardless of whether you choose to develop your frontend using Blade and Livewire or Vue / React and Inertia, you will likely need to bundle your application's CSS into production ready assets. Of course, if you choose to build your application's frontend with Vue or React, you will also need to bundle your components into browser ready JavaScript assets.

By default, Laravel utilizes Vite to bundle your assets. Vite provides lightning-fast build times and near instantaneous Hot Module Replacement (HMR) during local development. In all new Laravel applications, including those using our starter kits, you will find a vite.config.js file that loads our light-weight Laravel Vite plugin that makes Vite a joy to use with Laravel applications.

The fastest way to get started with Laravel and Vite is by beginning your application's development using our application starter kits, which jump-starts your application by providing frontend and backend authentication scaffolding.

[!NOTE]
For more detailed documentation on utilizing Vite with Laravel, please see our dedicated documentation on bundling and compiling your assets.