使用 TALL 创建您的第一个博客 - 第一部分

欢迎来到“使用 TALL（Tailwind CSS、Alpinejs、Laravel、Livewire）创建你的第一个博客”系列教程的第一部分。本教程将带你了解 TALL 技术栈，以及它如何帮助你更快地发布产品，并指导你如何在开发环境中搭建 TALL 技术栈。

本教程结束后，您将学习到：

TALL 技术栈由哪些部分组成？在 Web 应用开发中，每个部分又是什么？
使用 TALL 技术栈创建 Web 应用程序的优势
如何在开发机器上使用Laravel Jetstream设置 TALL 堆栈。
如何为我们的新 Laravel 应用添加 Jetstream 身份验证并进行配置

此外，你也将为本教程系列的下一部分做好充分准备。

我们出发吧。

注意：本教程假设您的系统已安装Composer 。如果您的计算机上尚未安装 Composer，请按照其网站上的说明进行安装。此外，本教程还假设您已具备 Laravel 知识并能够使用终端命令。

TALL堆栈简介

TALL 技术栈结合了前端和后端库/框架，使 Web 应用开发变得轻而易举。TALL 是Tailwind CSS、Alpine.js、Laravel和Livewire的首字母缩写。

正如您可能已经猜到的，这里的后端框架是 Laravel，而 Alpine.js 和 Tailwind CSS 是前端库。Laravel Livewire 是前端和 Laravel 后端之间的桥梁，它为 Laravel 带来了动态数据绑定，因此您可以使用 Laravel 在网站的用户界面部分实现响应式和交互性，而无需使用 JavaScript。

Tailwind CSS

Tailwind CSS是一个基于实用工具的 CSS 框架，它简化了 CSS 的使用流程。使用 Tailwind CSS 时，您甚至可以完全不编写任何 CSS 代码。这意味着您无需具备深厚的 CSS 知识（只需了解 CSS 类和其他属性的基本知识即可）即可使用 Tailwind CSS。

借助 Tailwind CSS，您的设计可能性无限。您的创造力和想象力就是唯一的限制！

阿尔卑斯山

Alpinejs是 JavaScript 库中的 Tailwind。它是一个非常小的 JavaScript 库，可以替代Vue.js和 React 等大型库，为您的 Web 应用程序实现交互性和响应性。

Alpinejs 采用了与 Tailwind CSS 类似的实用性优先设计理念，让在网页中使用 JavaScript 变得更加轻松。您无需在 script 标签或 .js 文件中编写函数和类，而是像编写HTML 属性一样，直接在HTML标签中编写 JavaScript 代码。

Laravel

Laravel框架是一个PHP框架，它为现代网站的开发带来了简洁性、稳健性和高效性。Laravel 框架成熟，拥有庞大的开发者社区、内容丰富且易于理解的文档，以及众多官方软件包，可帮助您完成网站开发周期。

使用 Laravel 意味着您可以轻松找到网站开发过程中遇到的问题的答案。您还可以访问庞大的免费开源软件包生态系统，从而更快地将 Web 应用程序交付并部署到生产环境。此外，您还可以享受 PHP 在 Web 开发方面的所有优势，例如更多的托管和部署选项、更经济实惠的服务器、更完善的技术支持等等。

Laravel Livewire

Laravel Livewire让您无需学习Vue.js和React等新的 JavaScript 框架，即可开发现代化、动态、响应式的用户界面。您只需用 PHP/Laravel 编写所有代码，Livewire 就会为您处理 JavaScript 部分。

如果您之前使用过 Vue.js，您可能了解数据绑定如何帮助您简化开发工作。Livewire 支持表单的数据绑定（也称为模型绑定），从而可以添加表单验证、便捷的文件上传、美观的分页以及其他诸多功能。

Livewire 将你的代码拆分成组件，从而在使用时获得结构良好、模块化的代码。与 Laravel 组件类似，Livewire 组件的理念是每个组件执行特定的操作，但你可以自由地将组件用作网页的唯一视图，甚至可以在同一个组件中执行不同的操作。

高堆叠结构的优势

我相信您已经从上面的解释中推断出每种工具的优势。如果您仍然不明白，以下是 TALL 技术栈的一些优点：

帮助您更快地发布 Web 应用程序。
提高你的网页开发效率
负责网站开发周期的所有环节：前端、后端和用户体验。
负责保护您的 Web 应用程序。
将交互性和响应式网页设计提升到一个新的水平
还有很多其他人

搭建我们的开发环境

Laravel Jetstream是一个 Laravel 脚手架包，为 Laravel Web 应用程序提供开箱即用的身份验证和 API 支持。Jetstream 捆绑了Inertia技术栈或 Livewire 技术栈，以及 Tailwind CSS 和 Alpine.js。本系列教程将使用 Livewire 技术栈。

要安装 Jetstream 入门套件，我们首先需要下载 Laravel 安装程序：

composer global require laravel/installer

这会将 Laravel 可执行文件下载到 Composer 的系统级vendor目录中。为了使该可执行文件全局可用，我们需要将 Composer 的vendor/bin目录添加到$PATH 环境变量中。根据您的开发机器，Composer 的vendor/bin目录可能位于以下位置之一：

macOS：$HOME/.composer/vendor/bin
Windows：%USERPROFILE%\AppData\Roaming\Composer\vendor\bin
Linux：$HOME/.config/composer/vendor/bin 或 $HOME/.composer/vendor/bin

要将此目录添加到您的$PATH中，请查阅您的操作系统文档。

将 Composer vendor/bin目录添加到系统路径后，导航到您希望项目托管的文件夹，例如Linux 系统上的home/Projects或Windows 系统上的Documents/Projects。在终端/命令提示符中使用以下命令创建一个新的 Laravel 项目：

laravel new tall-blog

等待所需依赖项安装完成。安装完成后，您应该会看到类似这样的信息：

kamil@kamil-sc650:~/Projects/Web$ laravel new tall-blog
 _                              _
| |                            | |
| |    __ _ _ __ __ ___  _____| |
| |   / _` | '__/ _` \ \ / / _ \ |
| |___| (_| | | | (_| |\ V / __/ |
|______\__,_|_| \__,_| \_/ \___|_|

Creating a "laravel/laravel" project at "./tall-blog"
Installing laravel/laravel (v8.5.9)
 - Installing laravel/laravel (v8.5.9): Extracting archive
Created project in /home/kamil/Projects/Web/tall-blog
> @php -r "file_exists('.env') || copy('.env.example', '.env');"
Loading composer repositories with package information
Updating dependencies
Lock file operations: 105 installs, 0 updates, 0 removals
 - Locking asm89/stack-cors (v2.0.2)
 - Locking brick/math (0.9.2)
 - Locking dnoegel/php-xdg-base-dir (v0.1.1)
 - Locking doctrine/inflector (2.0.3)
 - Locking doctrine/instantiator (1.4.0)
 - Locking doctrine/lexer (1.2.1)
 - Locking dragonmantank/cron-expression (v3.1.0)
 - Locking egulias/email-validator (2.1.25)
 - Locking facade/flare-client-php (1.3.7)
 ...
Writing lock file
Installing dependencies from lock file (including require-dev)                                                   
Package operations: 105 installs, 0 updates, 0 removals
 - Downloading symfony/var-dumper (v5.2.3)
 - Downloading symfony/string (v5.2.3)
 - Downloading symfony/console (v5.2.3)
 - Downloading symfony/css-selector (v5.2.3)
 - Downloading symfony/routing (v5.2.3)
 - Downloading symfony/process (v5.2.3)
 - Downloading symfony/mime (v5.2.3)
 - Downloading symfony/http-foundation
 ...
 - Installing doctrine/inflector (2.0.3): Extracting archive
 - Installing doctrine/lexer (1.2.1): Extracting archive
 - Installing symfony/polyfill-ctype (v1.22.0): Extracting archive
 - Installing webmozart/assert (1.9.1): Extracting archive
 - Installing dragonmantank/cron-expression (v3.1.0): Extracting archive
 - Installing symfony/polyfill-php80 (v1.22.0): Extracting archive
 - Installing symfony/polyfill-mbstring (v1.22.0): Extracting archive
 - Installing symfony/var-dumper (v5.2.3): Extracting archive
 - Installing symfony/polyfill-intl-normalizer (v1.22.0): Extracting archive
 - Installing symfony/polyfill-intl-grapheme (v1.22.0): Extracting archive
 - Installing symfony/string (v5.2.3): Extracting archive
 - Installing psr/container (1.0.0): Extracting archive
 - Installing symfony/service-contracts (v2.2.0): Extracting archive
 ...
63 package suggestions were added by new dependencies, use `composer suggest` to see details.                    
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: facade/ignition
Discovered Package: fideloper/proxy
Discovered Package: fruitcake/laravel-cors
Discovered Package: laravel/sail
Discovered Package: laravel/tinker
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
74 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan key:generate --ansi
Application key set successfully.

Application ready! Build something amazing.

如果在上一阶段遇到错误，请确保您的系统满足Laravel 网站上指定的系统要求。

启动内置的 PHP 服务器，让我们看看我们的初始网站：

php artisan serve

现在打开http://127.0.0.1:8000查看我们新开发的 Laravel 网站。

我们的下一个任务是安装 Laravel Jetstream。在项目根目录下，在终端中输入以下命令：

composer require laravel/jetstream

同样，如果一切顺利，你会得到类似这样的结果：

kamil@kamil-sc650:~/Projects/Web$ cd tall-blog && composer require laravel/jetstream
Using version ^2.1 for laravel/jetstream
./composer.json has been updated
Running composer update laravel/jetstream
Loading composer repositories with package information
Updating dependencies
Lock file operations: 9 installs, 0 updates, 0 removals
 - Locking bacon/bacon-qr-code (2.0.3)
 - Locking dasprid/enum (1.0.3)
 - Locking jaybizzle/crawler-detect (v1.2.104)
 - Locking jenssegers/agent (v2.6.4)
 - Locking laravel/fortify (v1.7.5)
 - Locking laravel/jetstream (v2.1.3)
 - Locking mobiledetect/mobiledetectlib (2.8.35)
 - Locking paragonie/constant_time_encoding (v2.4.0)
 - Locking pragmarx/google2fa (8.0.0)
Writing lock file
Installing dependencies from lock file (including require-dev)                                                   
Package operations: 9 installs, 0 updates, 0 removals
 - Downloading laravel/jetstream (v2.1.3)
 - Installing dasprid/enum (1.0.3): Extracting archive
 - Installing bacon/bacon-qr-code (2.0.3): Extracting archive
 - Installing jaybizzle/crawler-detect (v1.2.104): Extracting archive
 - Installing paragonie/constant_time_encoding (v2.4.0): Extracting archive
 - Installing pragmarx/google2fa (8.0.0): Extracting archive
 - Installing laravel/fortify (v1.7.5): Extracting archive
 - Installing mobiledetect/mobiledetectlib (2.8.35): Extracting archive
 - Installing jenssegers/agent (v2.6.4): Extracting archive
 - Installing laravel/jetstream (v2.1.3): Extracting archive
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: facade/ignition
Discovered Package: fideloper/proxy
Discovered Package: fruitcake/laravel-cors
Discovered Package: jenssegers/agent
Discovered Package: laravel/fortify
Discovered Package: laravel/jetstream
Discovered Package: laravel/sail
Discovered Package: laravel/tinker
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
75 packages you are using are looking for funding.
Use the `composer fund` command to find out more!

恭喜！Jetstream 软件包已安装。现在我们需要运行jetstream:installArtisan 命令，并livewire添加相应选项，以便将 Jetstream 与 Livewire 协议栈一起使用：

php artisan jetstream:install livewire

如果您的博客需要团队支持，您可以--teams在上述命令后添加参数。按下回车键后，您应该会看到类似这样的输出：

kamil@kamil-sc650:~/Projects/Web/tall-blog$ php artisan jetstream:install livewire
Migration created successfully!
./composer.json has been updated
Running composer update livewire/livewire laravel/sanctum
Loading composer repositories with package information
Updating dependencies
Lock file operations: 2 installs, 0 updates, 0 removals
 - Locking laravel/sanctum (v2.9.0)
 - Locking livewire/livewire (v2.3.16)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 2 installs, 0 updates, 0 removals
 - Downloading livewire/livewire (v2.3.16)
 0/1 [>---------------------------]  0%
 1/1 [============================] 100% - Installing laravel/sanctum (v2.9.0): Extracting archive
 - Installing livewire/livewire (v2.3.16): Extracting archive
 0/2 [>---------------------------]  0%
 2/2 [============================] 100%Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: facade/ignition
Discovered Package: fideloper/proxy
Discovered Package: fruitcake/laravel-cors
Discovered Package: jenssegers/agent
Discovered Package: laravel/fortify
Discovered Package: laravel/jetstream
Discovered Package: laravel/sail
Discovered Package: laravel/sanctum
Discovered Package: laravel/tinker
Discovered Package: livewire/livewire
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
76 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
Copied Directory [/vendor/laravel/sanctum/database/migrations] To [/database/migrations]
Copied File [/vendor/laravel/sanctum/config/sanctum.php] To [/config/sanctum.php]
Publishing complete.

Livewire scaffolding installed successfully.
Please execute "npm install && npm run dev" to build your assets.

之后，我们还需要安装和构建NPM依赖项并迁移数据库。在终端中输入以下命令即可完成：

npm install
npm run dev
php artisan migrate

当NPM依赖项安装、构建完成且迁移运行完毕后，我们的博客搭建过程就完成了。开箱即用，我们的 Laravel 博客就免费拥有了传统的身份验证和双因素身份验证、会话管理以及 API 支持 :)。

如果服务器没有运行，请使用以下命令启动内置的 PHP 服务器php artisan serve，然后在浏览器中访问该服务器http://127.0.0.1:8000。您应该会看到类似这样的输出：

这意味着我们的博客搭建过程已经成功。点击导航栏右上角的“注册”链接即可注册新账号：

输入您的详细信息，然后点击“注册”按钮进行注册和登录。

如果一切顺利，您将被重定向到预先设置好的 Jetstream 控制面板：

欢迎探索您新创建的由 Jetstream 提供支持的仪表盘的各项功能。特别是，您一定要浏览一下导航栏菜单链接，看看它们都提供了哪些功能。

至此，我们的“使用 TALL 创建你的第一个博客”系列教程第一集就结束了。下一集我们将配置 Jetstream 和 Fortify（用于身份验证），以便启用个人资料照片和电子邮件验证功能；设置数据库以及在.env文件中进行其他配置；配置路由；创建指向公共文件夹的符号链接以支持文件上传；更改默认应用程序徽标；以及为我们的博客创建必要的模型和迁移。

感谢阅读！我们下期教程再见。

文章来源：https://dev.to/nayi10/create-your-first-blog-with-the-tall-tailwind-css-alpine-js-laravel-laravel-livewire-stack-12kp

菜单

分享

使用 TALL 创建您的第一个博客 - 第一部分

使用 TALL 创建您的第一个博客 - 第一部分

TALL堆栈简介

Tailwind CSS

阿尔卑斯山

Laravel

Laravel Livewire

高堆叠结构的优势

搭建我们的开发环境

系统设计面试中的 19 种微服务模式

使用 React 和 AWS Amplify 实现无服务器架构第三部分：跟踪应用使用情况

模型-视图-控制器（MVC）模式到底是什么？DEV 全球项目展示挑战赛，由 Mux 主办：快来展示你的项目吧！

我在两年内从 PHP 开发人员晋升为高级 C#/.NET 开发人员。

了解 Docker：第 12 部分 – 传递构建参数

Yarn 和第三方 NPM 客户端的黑暗未来 DEV 的全球展示与讲述挑战赛，由 Mux 呈现：展示你的项目！

CSS DEV 的全球展示挑战赛“响应式字体”由 Mux 呈现：展示你的项目！

我是如何以学生开发者的身份免费获得 Tabnine Pro 的，你也可以！

五大顶级JS框架

从 Rector PHP 开始：利用自动化改进您的 PHP 代码