felipe-ps/jetstrap

一个用于轻松将Laravel Jetstream生成的TailwindCSS资源切换到Bootstrap 5的Laravel 9包,配合Vite使用。

安装: 555

依赖者: 0

建议者: 0

安全: 0

星星: 5

关注者: 1

分支: 0

语言:Vue

dev-main 2023-07-01 19:42 UTC

This package is not auto-updated.

Last update: 2024-09-22 01:44:05 UTC


README

Latest Stable Version Total Downloads License

描述

Jetstrap是一个轻量级的Laravel 9包,专注于在您的Laravel应用程序中安装的Jetstream / Breeze包的VIEW方面,因此在进行交换时,您的项目的ACTIONMODELCONTROLLERComponentACTION类仍然由Laravel开发团队100%处理,没有任何额外的复杂层。

注意

  • 我只测试了Jetstream。
  • 安装PHP版本后,在其中安装Composer。之后,取消注释php.ini中的"fileinfo"行
  • 查看Laravel版本:php artisan --version
  • 查看PHP版本:php -v

项目配置:Laravel框架9.24.0 PHP 8.1.9

参考链接:https://www.youtube.com/watch?v=nuB09o8SMUc&t=1s(Tech Chess)

目录

安装

安装Laravel(如有必要)

composer global require laravel/installer

项目创建

composer create-project --prefer-dist laravel/laravel:^9.2.0 laravel-jetstream-bootstrap

更新Composer(如有必要)

composer global update
composer global update -w
  • 在此情况下创建数据库 "my_test",并将其更改为 ".env"
  • 在终端中打开创建的项目 "cd laravel-jetstream-bootstrap"

安装Jetstream

您可以使用Composer将Jetstream安装到您的新的Laravel项目中

composer require laravel/jetstream:v2.12

如果您选择通过Composer安装Jetstream,则应运行jetstream:install Artisan命令。此命令接受您喜欢的堆栈名称(livewire或inertia)。强烈建议在开始Jetstream项目之前阅读Livewire或Inertia的整个文档。此外,您还可以使用--teams开关启用团队支持

使用Livewire安装Jetstream

php artisan jetstream:install livewire
or
php artisan jetstream:install livewire --teams (Not tested)

或者,使用Inertia安装Jetstream

php artisan jetstream:install inertia --teams (Not tested)

注意:忽略此部分的错误

安装Jetstrap

使用Composer将Jetstrap作为开发依赖项安装到您的新的Laravel项目中

composer require felipe-ps/jetstrap:dev-main

无论您如何安装Jetstream,Jetstrap命令与Jetstream非常相似,因为它接受您想要交换的堆栈名称(livewire或inertia)。

在执行交换之前,您非常重要地安装和配置Laravel Jetstream

强烈建议在开始Jetstrap项目之前阅读Jetstream的整个文档。此外,您还可以使用--teams开关交换团队资产,就像在Jetstream中一样

php artisan jetstrap:swap livewire

or

php artisan jetstrap:swap livewire --teams (Not tested)

php artisan jetstrap:swap inertia --team (Not tested)

这将发布覆盖以启用类似于过去的好日子里的Bootstrap!

安装Sass

npm i -D sass

完成安装

安装Jetstrap并交换Jetstream资源后,请从package.json中删除tailwindCSS及其依赖项(如果有的话),然后安装和构建您的NPM依赖项并迁移数据库

npm install && npm run build

php artisan migrate

php artisan serve

附加功能

分页(未测试)

重要的是要注意,Laravel 8仍然包含使用Bootstrap CSS构建的分页视图。要使用这些视图而不是默认的Tailwind视图,您可以在AppServiceProvider中调用paginator的useBootstrap方法

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Paginator::useBootstrap();
    }
}

预设(未测试)

预设是使用 Bootstrap 构建的第三方自定义模板。我们考虑过这个问题,你使用 Laravel 或 Laravel Jetstream 提供的默认模板的可能性有多大。

假设你在运行任何类型的脚手架之前已经知道了你想要走哪条路,所以如果你想使用 CoreUi 或 AdminLte 预设,那么在第一次运行任何 swap 命令时,应该在服务提供者中指定选择(JetstrapFacade::useCoreUi3()JetstrapFacade::useAdminLte3())。

如果你在运行了 swap 命令之后改变了主意并决定使用预设,那么再次运行 jetstrap:swap 命令。

核心 UI(未测试)

核心 UI 可以让你节省数千个小时的无价时间,因为它提供了你所需要的一切,以便根据他们网站上的说法创建现代、美观且响应式的应用程序。

请访问 CoreUI 的 文档 了解如何使用的更多详细信息。

要使用 Core Ui 预设,只需在 AppServiceProvider 中调用 useCoreUi3 方法。

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use NascentAfrica\Jetstrap\JetstrapFacade;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        JetstrapFacade::useCoreUi3();
    }
}

AdminLTE(未测试)

AdminLTE 是一个开源的行政仪表板和控制面板主题。基于 Bootstrap 构建,AdminLTE 提供了一系列响应式、可重用和常用组件。

请访问 AdminLTE 的 文档 了解如何使用的更多详细信息。

要使用 AdminLte 预设,只需在 AppServiceProvider 中调用 useAdminLte3 方法。

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use NascentAfrica\Jetstrap\JetstrapFacade;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        JetstrapFacade::useAdminLte3();
    }
}

Breeze(未测试)

警告!!!:Jetstrap 资源已更新以与 Breeze 当前版本兼容,但不支持与 inertia-react 资源的 swap。如果您能提供此功能,请自由提交 PR。

根据文档,“Breeze 为构建具有身份验证的 Laravel 应用程序提供了一个最小和简单的起点”,但个人认为它更像是没有 Vue 和 Bootstrap 的 Laravel Ui。最近我参与了一个项目,该项目没有使用 Vue 或需要复杂的身份验证系统,所以 Breeze 看起来是个不错的选择,但我再次遇到了 TailwindCSS 问题,所以我想到为什么不在 Jetstrap 包中包含它。

在继续之前,请通过官方文档熟悉 Breeze 文档

同样,Jetstrap 不影响 Breeze 的模型/控制器部分,只影响视图。

交换Breeze资源

要在一个配置了 Breeze 的 Laravel 中替换 Tailwind 资源为 Bootstrap,只需运行

php artisan jetstrap:swap breeze

交换Breeze inertia资源

Laravel Breeze 现在提供了 Inertia 脚手架的占位符,Jetstrap 也是如此。要为在 Breeze 和 Inertia 旁边运行的 Laravel 项目使用 Bootstrap 脚手架,只需运行以下代码

php artisan jetstrap:swap breeze-inertia

接下来,您需要清理您的 package.json 文件,以确保我们不会安装不必要的包。

然后运行

npm install && npm run dev

...完成!

在交换 breeze 资产时,在服务提供者中使用 JetstrapFacade::useCoreUi3()JetstrapFacade::useAdminLte3(); 将按预期工作。

测试

使用以下命令运行测试

vendor/bin/phpunit

composer tests

许可证

Jetstrap 是开源软件,受 MIT 许可证 许可。