01. 介绍

欢迎来到 Laravel 集训营！在本指南中，我们将逐步介绍从头开始构建现代 Laravel 应用程序的过程。为了探索该框架，我们将构建一个名为 Chirper 的微博平台。

#选择你自己的冒险
Blade、Livewire 或 JavaScript

Laravel 非常灵活，允许您使用各种技术来构建您的前端，以满足您的需求。在本教程中，我们为您准备了一些选择。

#Blade

Blade 是 Laravel 附带的简单而强大的模板引擎。您的 HTML 将在服务器端渲染，使其轻松包含来自数据库的动态内容。我们还将使用 Tailwind CSS 使其看起来很棒！

如果您不确定从哪里开始，我们认为 Blade 是最直接的。您始终可以回来使用 Livewire 或 JavaScript 再次构建 Chirper。

Greetings {{ $friend }}, let's build Chirper with Blade!

#Livewire

Livewire 是一种使用 PHP 构建动态、反应式前端 UI 的强大方法。老实说，您不会相信它不是 JavaScript。如果您是 Laravel 开发人员，您会感觉宾至如归。

<?php
 
use Livewire\Volt\Component;
 
new class extends Component
{
    public int $count = 0;
 
    public function increment(): void
    {
        $this->count++;
    }
}; ?>
 
<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+</button>
</div>

<?php
 
use function Livewire\Volt\{state};
 
state(['count' => 0]);
 
$increment = fn () => $this->count++;
 
?>
 
<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+</button>
</div>

#JavaScript & Inertia

如果您想使用 JavaScript，我们将提供 Vue 和 React 的代码示例。我们还将使用 Inertia 将它们连接起来，并使用 Tailwind CSS 使其看起来很棒！

如果您不确定选择哪个，我们非常喜欢 Vue，因为它对初学者友好且功能强大。完成 Bootcamp 后，您可以随时使用另一个堆栈再次尝试。

继续选择您的堆栈

<template>
<Welcome>
    Hey {{ friend }}, let's build Chirper with Vue!
</Welcome>
</template>

<Welcome>
    Nice to see you {friend}, let's build Chirper with React!
</Welcome>

在任何时候，您都可以查看任一框架的代码，以了解另一边的生活，只需确保不要在项目中混合代码。