如何用Laravel Sail和Tailwind CSS创建一个新的Laravel应用程序

后端之巅
3,118 阅读15分钟

简介

Laravel Sail是一个Docker开发环境, 默认包含在Laravel 8版本中.它允许你快速建立和运行一个PHP开发环境, 为运行Laravel应用程序而定制, 并内置NPM / Node支持.

在本指南中, 你将用Laravel Sail引导一个新的Laravel应用程序, 并使用Tailwind CSS创建一个有风格的 "关于我 "的登陆页面, 这是一个实用至上的CSS框架, 旨在快速构建自定义用户界面。最后, 你会有一个基础，你可以用它来进一步开发Laravel应用程序，在前端使用Tailwind CSS，在开发环境使用Sail。

Laravel Tailwind Responsive About Me Page

如果你想从现有的代码库中继续学习，而不是从头开始创建项目，你可以在GitHub的do-community/laravel-tailwind-starter上访问完成的演示应用代码。

前提条件

尽管本指南中分享的代码应该可以在多种环境和系统中无缝工作，但这里解释的说明是在运行Docker和Docker Compose的Ubuntu 20.04本地系统中测试的。无论你的基本操作系统是什么，以下是你需要设置的东西，以便开始使用。

  • 在你的本地机器上安装Docker。如果你运行的是Ubuntu 20.04，你可以按照《如何在Ubuntu 20.04上安装和使用Docker》的步骤1和2来设置。Windows和MacOS用户则需要安装Docker Desktop。
  • 在你的本地机器上安装Docker Compose。Docker Compose默认包含在Windows和MacOS系统的Docker Desktop中，但Linux用户需要按照《如何在Ubuntu 20.04上安装和使用Docker Compose》的步骤1来安装Compose可执行文件。
  • 一个用于PHP的代码编辑器（可选）。代码编辑器有助于使代码更容易阅读和格式化，并且可以在执行代码之前指出问题，从而提高工作效率。你可以按照我们的指南：如何为PHP项目设置Visual Studio Code来设置VSCode，一个免费的代码编辑器，在你的本地开发环境中。

步骤1 - 使用Laravel Builder脚本创建一个新的Laravel应用程序

为了开始，你将下载并执行官方的Laravel生成器脚本，它将拉入必要的Docker容器镜像来构建你的开发环境，然后在你当前的文件夹中启动一个新的应用程序。这种安装方法不需要你在系统中安装PHP, 只需要你下载并执行构建器脚本，它将建立Docker环境，你可以运行实际的Laravel安装程序。

在最后, 脚本会询问你的sudo 密码，以确保应用程序文件夹对你的系统用户有正确的权限。你可以从你的浏览器中访问该脚本的URL，在运行下一个命令之前验证其内容。在这个例子中，我们使用的是myapp这个名字，但你可以自由地用一个不同的名字来代替。

curl -s https://laravel.build/myapp | bash

OutputUnable to find image 'laravelsail/php80-composer:latest' locally
latest: Pulling from laravelsail/php80-composer
852e50cd189d: Pull complete 
0266fc315b01: Pull complete 
…
Application ready! Build something amazing.
Sail scaffolding installed successfully.

Please provide your password so we can make some final adjustments to your application's permissions.

[sudo] password for sammy: 

Thank you! We hope you build something incredible. Dive in with: cd myapp && ./vendor/bin/sail up

当安装完成后，访问新的应用程序目录，用Sail环境起来。

cd myapp
./vendor/bin/sail up

这将使环境进入前台模式，所以你可以跟进所有运行中的容器的日志。你会看到一些不同的服务被启动，使用不同的端口在彼此之间通信。

Output...
mailhog_1 | [HTTP] Binding to address: 0.0.0.0:8025
...
laravel.test_1 | Starting Laravel development server: http://0.0.0.0:80
...
meilisearch_1 | Server listening on: "http://0.0.0.0:7700"
...
mysql_1 | 2021-06-23T01:15:24.327234Z 0 [System] [MY-010931] [Server] /usr/sbin/mysqld: ready for connections. Version: '8.0.25' socket: '/var/run/mysqld/mysqld.sock' port: 3306 MySQL Community Server - GPL.
...
selenium_1 | 01:14:57.417 INFO [SeleniumServer.boot] - Selenium Server is up and running on port 4444
...
redis_1 | 1:M 23 Jun 2021 01:14:54.243 * Running mode=standalone, port=6379.
…

这些是在Sail环境中默认配置的服务。关于每个服务的更多信息，请参考官方的Sail文档。

接下来，从你的浏览器访问该应用程序，地址是：。

http://localhost

如果所有步骤都成功了，你会看到一个像这样的页面。
Laravel welcome page

应用程序现在已经启动了。

现在你可以通过输入CTRL+C 来停止正在你的终端上运行的Sail环境。

第2步 - 使用Laravel Sail

Laravel Sail提供了几个快捷键来管理你的开发环境。大多数命令和参数是基于默认的Docker Compose API。

控制环境

要把环境调到后台模式, 你可以运行:

./vendor/bin/sail up -d

要停止之前在后台模式下启动的Sail环境，可以运行。

./vendor/bin/sail stop

这不会删除连接的网络或卷。

要使一个以前用sail stop 命令停止的环境恢复，你可以使用。

./vendor/bin/sail start

要停止一个环境，同时删除所有相关的资源，如卷和网络，你可以使用sail down 命令。请注意，这个命令将删除任何以前创建的、只在容器内可用的数据，比如存储在数据库中的记录。

./vendor/bin/sail down

OutputStopping laravel-tailwind-starter_laravel.test_1 ... done
Stopping laravel-tailwind-starter_redis_1        ... done
Stopping laravel-tailwind-starter_selenium_1     ... done
Stopping laravel-tailwind-starter_mysql_1        ... done
Stopping laravel-tailwind-starter_mailhog_1      ... done
Stopping laravel-tailwind-starter_meilisearch_1  ... done
Removing laravel-tailwind-starter_laravel.test_1 ... done
Removing laravel-tailwind-starter_redis_1        ... done
Removing laravel-tailwind-starter_selenium_1     ... done
Removing laravel-tailwind-starter_mysql_1        ... done
Removing laravel-tailwind-starter_mailhog_1      ... done
Removing laravel-tailwind-starter_meilisearch_1  ... done
Removing network laravel-tailwind-starter_sail

检查状态和日志

如果你的环境发生了故障，请把它恢复起来。

./vendor/bin/sail up -d

当你的环境启动并运行时，你可以用：检查所有活动容器的状态。

./vendor/bin/sail ps

Output           Name                         Command                  State                              Ports                        
---------------------------------------------------------------------------------------------------------------------------------
myapp_laravel.test_1   start-container                  Up             0.0.0.0:80->80/tcp,:::80->80/tcp, 8000/tcp          
myapp_mailhog_1        MailHog                          Up             0.0.0.0:1025->1025/tcp,:::1025->1025/tcp,           
                                                                             0.0.0.0:8025->8025/tcp,:::8025->8025/tcp            
myapp_meilisearch_1    tini -- /bin/sh -c ./meili ...   Up (healthy)   0.0.0.0:7700->7700/tcp,:::7700->7700/tcp            
myapp_mysql_1          docker-entrypoint.sh mysqld      Up (healthy)   0.0.0.0:3306->3306/tcp,:::3306->3306/tcp, 33060/tcp 
myapp_redis_1          docker-entrypoint.sh redis ...   Up (healthy)   0.0.0.0:6379->6379/tcp,:::6379->6379/tcp            
myapp_selenium_1       /opt/bin/entry_point.sh          Up             4444/tcp

sail ps 命令的输出将告诉你哪些与该特定环境相关的容器目前是活动的，哪些端口正在被重定向，更重要的是，每个容器处于何种状态。在前面的例子输出中，所有的服务都是向上的。

当你在后台模式下运行你的环境时，要检查容器的日志，你可以使用。

./vendor/bin/sail logs

这将向你显示所有服务的最新日志。

Attaching to laravel-tailwind-starter_laravel.test_1, laravel-tailwind-starter_mailhog_1, laravel-tailwind-starter_mysql_1, laravel-tailwind-starter_redis_1, laravel-tailwind-starter_selenium_1, laravel-tailwind-starter_meilisearch_1
...
mysql_1         | 2021-06-24T15:08:06.435530Z 0 [System] [MY-010931] [Server] /usr/sbin/mysqld: ready for connections. Version: '8.0.25'  socket: '/var/run/mysqld/mysqld.sock'  port: 3306  MySQL Community Server - GPL.
...
meilisearch_1   | [2021-06-24T15:16:38Z INFO  actix_web::middleware::logger] 127.0.0.1:60874 "GET /health HTTP/1.1" 200 22 "-" "Wget" 0.000056
...
laravel.test_1  | [Thu Jun 24 15:08:07 2021] PHP 8.0.7 Development Server (http://0.0.0.0:80) started
...

selenium_1      | 15:08:06.864 INFO [SeleniumServer.boot] - Selenium Server is up and running on port 4444
...
redis_1         | 1:M 24 Jun 2021 15:08:05.280 * Ready to accept connections
...
mailhog_1       | 2021/06/24 15:08:05 Serving under http://0.0.0.0:8025/

你也可以通过给命令调用提供一个额外的参数来查看每个服务的日志。

./vendor/bin/sail logs redis

OutputAttaching to laravel-tailwind-starter_redis_1
redis_1         | 1:C 24 Jun 2021 15:08:05.278 # oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Oo
redis_1         | 1:C 24 Jun 2021 15:08:05.278 # Redis version=6.2.4, bits=64, commit=00000000, modified=0, pid=1, just started
...
redis_1         | 1:M 24 Jun 2021 15:08:05.280 * RDB memory usage when created 0.77 Mb
redis_1         | 1:M 24 Jun 2021 15:08:05.280 * DB loaded from disk: 0.000 seconds
redis_1         | 1:M 24 Jun 2021 15:08:05.280 * Ready to accept connections

运行Artisan和Composer

在处理你的Laravel应用时, 你经常需要运行artisan 命令来构建, 测试, 和管理你的应用.你也需要运行composer 命令来管理你的PHP依赖性.除了默认的Docker Compose API之外, Sail还提供了有用的快捷方式来在你的应用程序容器中执行这些命令(myapp_laravel.test_1 在例子的输出中).在常规的Docker Compose设置下，运行Artisan会是这样的。

只使用Docker Compose

docker-compose exec app php artisan

使用Sail，相应的调用被缩短为。

使用Sail运行Artisan

./vendor/bin/sail artisan

你可以用类似的方式运行Composer。

用Sail运行Composer

./vendor/bin/sail composer

更多关于所有功能和命令的信息，请访问官方Laravel Sail文档。

你现在已经熟悉了如何管理你的Sail开发环境以及如何在应用容器上运行命令。在下一步，你将设置Tailwind CSS来设计和美化你的登陆页面。

第3步 - 用Laravel设置Tailwind CSS

接下来，你将安装和设置Tailwind CSS，以建立一个登陆页面。

确保你的Sail环境已经启动并运行，然后用npm 命令来安装Laravel的前端依赖项，该命令用于下载和管理JavaScript包。

./vendor/bin/sail npm install

Output...
added 1327 packages, and audited 1328 packages in 20s

99 packages are looking for funding
  run `npm fund` for details
...

然后，用Tailwind和它的依赖项安装。

./vendor/bin/sail npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Output...
added 9 packages, removed 22 packages, changed 7 packages, and audited 1315 packages in 5s

99 packages are looking for funding
  run `npm fund` for details
...

接下来，你需要为Tailwind创建一个配置文件。要做到这一点，你将使用npx ，它代表_Node包执行器_，允许你执行一个Node包。下面的npx 命令将为你的应用程序生成一个新的默认Tailwind配置。

./vendor/bin/sail npx tailwindcss init

这将在你项目的根目录下创建一个名为tailwind.config.js 的新配置文件，内容如下。

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

尽管在一个项目中，有不同的方法来设置Tailwind，在本指南中，我们将用Laravel Mix和webpack来配置Tailwind。这两个库都是用来编译和输出前端资源的。

用你的代码编辑器打开文件webpack.mix.js 。它看起来会像这样。

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Laravel Mix使用PostCSS来编译CSS资源。删除// 字符，并包括以下突出显示的一行，这将在要处理的CSS资源列表中添加Tailwind CSS。

删除// 字符，并包括以下高亮行，这需要Tailwind作为一个PostCSS插件。

webpack.mix.js

  mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [
     require("tailwindcss"),
    ]);

做完这个改动后保存文件。

接下来，在应用程序的主CSS文件内包含Tailwind。在你的代码编辑器中打开resources/css/app.css ，并向该文件添加以下3行。

resources/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

完成后保存。

接下来，你将需要用NPM构建前端资产。

./vendor/bin/sail npm run dev

你将收到与下面类似的输出，其中有一行像高亮显示的Compiled Successfully 部分，表明你已经将所有的组件集成到你的Sail环境中。

Output
   Laravel Mix v6.0.24   


✔ Compiled Successfully in 5515ms
┌───────────────────────────────────────────────────────────────────┬──────────┐
│                                                             File │ Size   │
├───────────────────────────────────────────────────────────────────┼──────────┤
│                                                     /js/app.js │ 597 KiB  │
│                                                     css/app.css │ 3.81 MiB │
└───────────────────────────────────────────────────────────────────┴──────────┘
webpack compiled successfully

现在，Tailwind已经配置好了，你已经为你的网站建立了前端资产。 在下一步，你将为你的应用程序创建一个新的登陆页面。

第4步 - 创建一个登陆页

随着Tailwind的配置到位，你现在可以开始构建你的应用程序的前端视图。在Laravel中，模板通常存储在resources/views 目录中。你之前在浏览器中打开应用程序时看到的页面(http://localhost)被定义在该目录下一个名为welcome.blade.php 的模板中。

在你的代码编辑器中, 在resources/views 目录中打开一个名为index.blade.php 的新文件.

下面的例子模板定义了一个 "关于我 "的HTML页面，其中有一些没有样式的元素。它使用了一个头像的例子，但你可以用你自己的图片来代替它。

在公共应用程序文件夹中创建一个新的img 目录。

mkdir public/img

把你喜欢的图片保存到这个新目录中，名称为profile_image.png 。

在下面的例子中，注意到使用突出显示的{{ asset… }} 辅助行来定义CSS和图像文件的路径。这个函数为位于public 目录中的应用程序资源输出了正确的公共路径。

将此内容复制到您自己的index.blade.php 。

resources/views/index.blade.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Sammy the Shark - About Page</title>
    <meta name="description" content="My Application Description">
    <meta name="author" content="Sammy">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div>
    <img src="{{ asset('img/profile_image.png') }}" width="200" alt="avatar"/>
    <h1>Sammy the Shark</h1>
    <p>Content Creator</p>
    <p>Hello, I'm Sammy. I am a friendly shark interested in Linux, coding, and community.
        You can find out more about me in the following links:</p>
    <div>
        <div><a href="https://twitter.com/digitalocean">Twitter</a></div>
        <div><a href="https://www.linkedin.com/company/digitalocean">LinkedIn</a></div>
        <div><a href="https://instagram.com/thedigitalocean">Instagram</a></div>
    </div>
</div>
</body>
</html>

当你完成编辑其内容时，保存该文件。

现在编辑routes/web.php 文件，修改主路由，使其使用新创建的模板。用你的代码编辑器打开该文件，用index 替换welcome ，以改变主应用程序端点使用的视图。完成后，更新后的路由声明会是这样的。

routes/web.php

Route::get('/', function () {
    return view('index');
});

保存该文件。现在你可以在浏览器中重新加载应用页面，看到新的索引页面。你会看到一个像这样的页面。
Laravel about me page with tailwind - base template

默认情况下，Tailwind删除了元素的所有样式，这让你可以通过组合和混合Tailwind的CSS实用类，自由地建立你的视图。在下一节中，你将学习如何结合这些实用类，以创建一个响应式的 "关于我 "页面。

第5步--用Tailwind CSS为您的登陆页面定型

构建响应式页面是一个重要的前端开发要求，因为用户可能从许多不同的设备上访问您的网站或应用程序，每个设备的屏幕尺寸都不同。

Tailwind提供的选择器，能够应用每个屏幕尺寸的样式。这样，你可以通过设置最小的宽度作为默认值来创建响应式容器，并为更大的屏幕附加额外的响应式尺寸。例如，使用class="w-3/4 lg:w-1/2" 的元素将设置默认宽度为父元素宽度的四分之三，这对较小的屏幕有效，但对于较大的屏幕（lg: 选择器），它将使用父元素的一半宽度。

请注意，你可以将响应式选择器与任何实用类结合起来，而不仅仅是与元素的大小相关的实用类。例如，你可以在某个断点隐藏一个元素，改变它的颜色，甚至把它变成一个列数可变的网格。

你可以在Tailwind的官方文档中找到所有可用的响应式选择器和它们对应的断点。

下面的模板在页面中央设置了一个响应式的内容区域，使用背景梯度和一个头像示例。对于按钮，它使用了一个网格流系统，从中等屏幕开始将容器分成三列，但当页面从较小的屏幕访问时，会使按钮占据整个容器的大小。

在代码编辑器中打开上一步创建的resources/views/index.blade.php 文件，用以下模板替换其内容。

resources/views/index.blade.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Sammy the Shark - About Page</title>
    <meta name="description" content="My Application Description">
    <meta name="author" content="Sammy">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body class="bg-gradient-to-r from-blue-400 via-purple-600 to-blue-700">

<div class="w-3/4 lg:w-1/2 mx-auto rounded-md bg-gray-200 shadow-lg m-20 p-10 text-center">
    <img src="{{ asset('img/profile_image.png') }}" class="w-32 lg:w-1/6 bg-blue-600 mx-auto rounded-lg mb-4" alt="avatar"/>
    <h1 class="text-3xl">Sammy the Shark</h1>
    <p class="text-gray-500 pb-4">Content Creator</p>
    <p class="text-gray-700 mb-6">Hello, I'm Sammy. I am a friendly shark interested in Linux, coding, and community.
        You can find out more about me in the following links:</p>

    <div class="grid grid-cols-1 md:grid-cols-3 grid-flow-row gap-6">
        <div class="px-4 py-2 bg-blue-600 text-gray-100 rounded-md mr-4 hover:bg-blue-700"><a href="https://twitter.com/digitalocean">Twitter</a></div>
        <div class="px-4 py-2 bg-blue-600 text-gray-100 rounded-md mr-4 hover:bg-blue-700"><a href="https://www.linkedin.com/company/digitalocean">LinkedIn</a></div>
        <div class="px-4 py-2 bg-blue-600 text-gray-100 rounded-md mr-4 hover:bg-blue-700"><a href="https://instagram.com/thedigitalocean">Instagram</a></div>
    </div>

</div>
</body>
</html>

这个模板将产生以下页面。

Final result - Laravel about me page with Tailwind

而这就是该页面适应不同屏幕尺寸的方式。

Laravel Tailwind Responsive About Me Page

在更新的模板中，每个HTML元素都有一些Tailwind的类和选择器应用于它们。Tailwind为其实用类使用了特定的命名，以创建响应式布局。以下每一个都被用于示例模板中，以创建最终结果。

  • bg-gradient-to-r ：使用指定的颜色，创建一个从左到右的渐变。
  • w-1/3 ：将元素的宽度设置为父元素宽度的三分之一**（1/3**）。在Tailwind中，有许多不同的方法来设置一个元素的宽度。
  • mx-auto ：将元素居中。
  • rounded-md ：创建圆角，尺寸为 "中等"（md）。
  • shadow-lg ：创建一个阴影效果，大小为 "大"（lg）。
  • mr-* 和其他m 变体：用于设置元素的边距。
  • pb-* 和其他p 变体：用于设置元素的padding。
  • hover:bg-blue-700 ：在鼠标悬停时改变所选元素的背景颜色。

查看Tailwind的官方文档，了解所有可用的实用类的完整参考。

总结

在本教程中，你已经使用Laravel Sail和Tailwind CSS引导了一个新的Laravel应用程序。你还使用Tailwind强大的实用类创建了一个响应式的 "关于我 "登陆页面。

如果你想建立一个更复杂的登陆页面，并在这个过程中了解更多关于Tailwind的信息，你可以跟随我们的指南：如何用Tailwind CSS建立一个有风格的登陆页面，详细说明如何用这个框架创建一个完整的网站页面。

如果你想在一个基于项目的指南中了解更多关于Laravel的信息，你可以参考我们的《如何用Laravel在PHP中建立一个链接登陆页》系列。更多的PHP内容，请查看我们的PHP标签。

avatar
文章
阅读
粉丝