README

介绍

此包是 Laravel UI 4.x 包的修改版。它是为了填补简单 Tailwind 认证脚手架的空白而创建的，通过复制 Laravel UI 4.x 包中使用的 Laravel UI 4.x 包的方法。

文档

支持的版本

只有 Laravel UI+ TW 的最新主要版本会收到错误修复。下表列出了兼容的 Laravel 版本

| 版本 | Laravel 版本 | 日期 | |---- |----| | 1.x | 9.x, 10.x, 11.x | 2nd Feb' 2024 |

安装

Laravel UI+ TW 提供的 Bootstrap、TailWind、React 和 Vue 脚手架位于 algoetech/laravel-uiplustw Composer 包中，可以使用 Composer 安装。

composer require algoetech/laravel-uiplustw

一旦安装了 algoetech/laravel-uiplustw 包，可以使用 ui Artisan 命令安装前端脚手架。

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui tailwind
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui tailwind --auth
php artisan ui vue --auth
php artisan ui react --auth

CSS

Laravel 正式支持 Vite，这是一个提供极快开发环境和将代码打包用于生产的现代前端构建工具。Vite 支持 SASS 和 Less 等多种 CSS 预处理器语言，它们是扩展 CSS 的语言，增加了变量、混合等功能，使得使用 CSS 更加愉快。在本文档中，我们将简要讨论 CSS 编译；然而，有关编译 SASS 或 Less 的更多信息，应查阅完整的 Vite 文档。

JavaScript

Laravel 不要求您使用特定的 JavaScript 框架或库来构建应用程序。实际上，您甚至不需要使用 JavaScript。但是，Laravel 包含一些基本的脚手架，以更容易地开始使用 Vue 库编写现代 JavaScript。Vue 提供了一个用于构建强大 JavaScript 应用程序的组件表达式 API。与 CSS 类似，我们可以使用 Vite 将 JavaScript 组件编译成一个浏览器就绪的 JavaScript 文件。

编写 CSS

安装 algoetech/laravel-uiplustw Composer 包和 生成前端脚手架 后，Laravel 的 package.json 文件将包括 bootstrap 包，以帮助您开始使用 Bootstrap 模拟应用程序的前端。但是，根据您自己的应用程序需要，您可以选择添加或删除 package.json 文件中的包。您不需要使用 Bootstrap 框架来构建 Laravel 应用程序 - 它提供给那些选择使用它的人作为一个良好的起点。

在编译 CSS 之前，使用 Node 包管理器 (NPM) 安装您项目的前端依赖项。

npm install

如果您使用了 Tailwind 脚手架，请运行此命令，否则请跳过

npx tailwind init

使用 npm install 安装了依赖项后，可以使用 Vite 将您的 SASS 文件编译成纯 CSS。执行 npm run dev 命令将处理 vite.config.js 文件中的指令。通常，编译后的 CSS 将放置在 public/build/assets 目录中。

npm run dev

随 Laravel 前端脚手架提供的 vite.config.js 文件会编译 resources/sass/app.scss SASS 文件。这个 app.scss 文件导入了一个 SASS 变量文件，并加载 Bootstrap，为大多数应用程序提供了一个良好的起点。您可以随意自定义 app.scss 文件，或者通过 配置 Vite 使用完全不同的预处理器。

编写 JavaScript

应用程序所需的所有 JavaScript 依赖项都可以在项目根目录下的 package.json 文件中找到。该文件类似于 composer.json 文件，但指定的是 JavaScript 依赖项而不是 PHP 依赖项。您可以使用 Node 包管理器 (NPM) 安装这些依赖项。

npm install

默认情况下，Laravel 的 package.json 文件包含一些包，如 lodash 和 axios，以帮助您开始构建 JavaScript 应用程序。您可以按照自己的需要添加或删除 package.json 文件中的包。

安装完这些包后，您可以使用 npm run dev 命令 编译您的资产。Vite 是一个现代 JavaScript 应用的模块打包器。运行 npm run dev 命令时，Vite 会执行 vite.config.js 文件中的指令。

npm run dev

默认情况下，Laravel 的 vite.config.js 文件会编译您的 SASS 和 resources/js/app.js 文件。在 app.js 文件中，您可以注册 Vue 组件或配置自己的 JavaScript 应用程序（如果您偏好不同的框架）。编译后的 JavaScript 通常会被放置在 public/build/assets 目录中。

app.js 文件会加载 resources/js/bootstrap.js 文件，该文件会启动并配置 Vue、Axios、jQuery 以及所有其他 JavaScript 依赖项。如果您有额外的 JavaScript 依赖项需要配置，您也可以在此文件中进行。

编写 Vue 组件

当使用 laravel/ui 包来搭建您的前端时，一个 ExampleComponent.vue Vue 组件会被放置在 resources/js/components 目录中。这个 ExampleComponent.vue 文件是一个 单文件 Vue 组件 的例子，它在其同一个文件中定义了 JavaScript 和 HTML 模板。单文件组件为构建 JavaScript 驱动的应用程序提供了一种非常方便的方法。示例组件已在您的 app.js 文件中注册。

import ExampleComponent from './components/ExampleComponent.vue';
Vue.component('example-component', ExampleComponent);

要使用组件在您的应用程序中，您可以将它放入您的 HTML 模板中的一个。例如，在运行了 php artisan ui vue --auth Artisan 命令来搭建应用程序的认证和注册界面后，您可以将组件放入 home.blade.php Blade 模板中。

@extends('layouts.app')

@section('content')
    <example-component></example-component>
@endsection

请记住，每次您更改 Vue 组件时都应该运行 npm run dev 命令。或者，您也可以运行 npm run watch 命令来监控并自动重新编译组件，每当它们被修改时。

如果您对编写 Vue 组件感兴趣，应该阅读 Vue 文档，它提供了对整个 Vue 框架的全面、易于阅读的概述。

使用 React

如果您更愿意使用 React 来构建 JavaScript 应用程序，Laravel 可以轻松地将 Vue 脚手架与 React 脚手架互换。

composer require laravel/ui

// Generate basic scaffolding...
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui react --auth

添加预设

预设是“可宏化的”，这允许您在运行时向 UiCommand 类添加额外的功能。例如，以下代码向 UiCommand 类添加了一个 nextjs 方法。通常，您应该在 服务提供者 中声明预设宏。

use Laravel\Ui\UiCommand;

UiCommand::macro('nextjs', function (UiCommand $command) {
    // Scaffold your frontend...
});

然后，您可以通过 ui 命令调用新的预设。

php artisan ui nextjs

贡献

欢迎贡献者。

许可证

Laravel UI+ TW 是开源软件，遵循 MIT 许可协议。