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

简介

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标签。

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

简介

前提条件

过程1 – 运用Laravel Builder脚本创立一个新的Laravel运用程序

第2步 – 运用Laravel Sail

控制环境

检查状况和日志

运转Artisan和Composer

第3步 – 用Laravel设置Tailwind CSS

第4步 – 创立一个登陆页

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

总结

相关文章

远程连接终端——WindTerm 安装使用教程

微博图床被废了，自己动手丰衣足食。

Jenkins集成GitLab的正确姿势，实现Git代码提交触发CI/CD

一看就懂的Vite使用和原理分析，提高开发效率有妙招

作者信息