将 TailAdmin 与 Laravel 集成

Source: Dev.to

完整代码: raflizocky/laravel11-tailadmin

Laravel 11 要求

# php version
php -v   # >= 8.2

composer -v
node -v   # >= v14.16
npm -v

Laravel 设置

# install Laravel 11
composer create-project "laravel/laravel:^11.0" example-app

# .env configuration
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_db
DB_USERNAME=root
DB_PASSWORD=your_password

# migrate & serve
php artisan migrate
php artisan serve

TailAdmin

1. 下载

从官方网站下载 HTML + Tailwind CSS 模板，解压压缩包后，将文件夹重命名为 tailadmin，并移动到 Laravel 的 public 目录下。

2. Webpack

该模板使用 Webpack 编译资源。

# from the Laravel project root
cd public/tailadmin
npm i
npm run build

现在 public/tailadmin 中应该会出现一个 build 文件夹。

3. 基础布局

1. 在 resources/views 下创建一个 components 目录。
2. 添加 layout.blade.php 文件，并将 public/tailadmin/build/index.html 的内容复制进去。
3. 将资源路径改为使用 Laravel 的 asset() 辅助函数。

示例 layout.blade.php

 localStorage.setItem('darkMode', JSON.stringify(value)))"
      :class="{ 'dark text-bodydark bg-boxdark-2': darkMode === true }">

     { setTimeout(() => loaded = false, 500) })"
         class="fixed left-0 top-0 z-999999 flex h-screen w-screen items-center justify-center bg-white dark:bg-black">
        
    

    
        
        
            {{ $slot }}
        
    

    

你也可以创建简单的头部和侧边栏组件（components/header.blade.php、components/sidebar.blade.php），并使用 <x-header /> 与 <x-sidebar /> 标签引入它们。

4. 仪表盘

为仪表盘创建控制器：

php artisan make:controller DashboardController

完成以上步骤后，TailAdmin 的 UI 就成功集成到全新的 Laravel 11 应用中。