Пользовательский интерфейс Laravel

Хотя Laravel не указывает, какие препроцессоры JavaScript или CSS вы должны использовать, он предоставляет базовую отправную точку с использованием Bootstrap , React и/или Vue , которая будет полезна для многих приложений. По умолчанию Laravel использует NPM для установки обоих этих интерфейсных пакетов.

Этот устаревший пакет представляет собой очень простую структуру проверки подлинности, построенную на платформе Bootstrap CSS. Хотя он продолжает работать с последней версией Laravel, вам следует рассмотреть возможность использования Laravel Breeze для новых проектов. Или, для чего-то более надежного, рассмотрите Laravel Jetstream .

Установка

Скаффолдинг Bootstrap и Vue, предоставляемый Laravel, находится в laravel/uiпакете Composer, который можно установить с помощью Composer:

composer require laravel/ui

После того , как laravel/ui пакет был установлен, вы можете установить каркас внешнего интерфейса с помощью команды ui artisan:

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

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

CSS

Laravel официально поддерживает Vite, современный инструмент для сборки внешнего интерфейса, который обеспечивает чрезвычайно быструю среду разработки и объединяет ваш код для производства. Vite поддерживает различные языки препроцессора CSS, включая SASS и Less, которые являются расширениями простого CSS, добавляющими переменные, примеси и другие мощные функции, которые делают работу с CSS намного более приятной. В этом документе мы кратко обсудим компиляцию CSS в целом; однако вам следует ознакомиться с полной документацией Vite для получения дополнительной информации о компиляции SASS или Less.

JavaScript

Laravel не требует от вас использования определенного фреймворка или библиотеки JavaScript для создания ваших приложений. На самом деле вам вообще не нужно использовать JavaScript. Тем не менее, Laravel включает некоторые базовые шаблоны, чтобы упростить начало написания современного JavaScript с использованием библиотеки Vue. Vue предоставляет выразительный API для создания надежных приложений JavaScript с использованием компонентов. Как и в случае с CSS, мы можем использовать Vite для простой компиляции компонентов JavaScript в один готовый для браузера файл JavaScript.

Написание CSS

После установки laravel/ui пакета Composer и создания каркаса внешнего интерфейса файл Laravel package.json будет включать bootstrap пакет, который поможет вам приступить к созданию прототипа внешнего интерфейса вашего приложения с помощью Bootstrap. Однако не стесняйтесь добавлять или удалять пакеты из package.jsonфайла по мере необходимости для вашего собственного приложения. Вам не обязательно использовать фреймворк Bootstrap для создания своего приложения Laravel — он предоставляется в качестве хорошей отправной точки для тех, кто решит его использовать.

Перед компиляцией CSS установите внешние зависимости вашего проекта с помощью менеджера пакетов Node (NPM):

npm install

После того, как зависимости были установлены с помощью npm install, вы можете скомпилировать файлы SASS в простой CSS с помощью Vite. Команда npm run devобработает инструкции в вашем vite.config.js файле. Как правило, ваш скомпилированный CSS будет помещен в public/build/assets каталог:

npm run dev

Файл vite.config.js, входящий в состав внешнего интерфейса Laravel, будет компилировать resources/sass/app.scss файл SASS. Этот app.scss файл импортирует файл переменных SASS и загружает Bootstrap, который обеспечивает хорошую отправную точку для большинства приложений. Не стесняйтесь настраивать app.scss файл по своему усмотрению или даже использовать совершенно другой препроцессор, настроив Vite.

Написание JavaScript

Все зависимости JavaScript, необходимые вашему приложению, можно найти в package.json файле в корневом каталоге проекта. Этот файл похож на composer.json файл, за исключением того, что он определяет зависимости JavaScript вместо зависимостей PHP. Вы можете установить эти зависимости с помощью менеджера пакетов Node (NPM):

npm install

package.json - По умолчанию файл Laravel включает несколько пакетов, таких как 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

Помните, что вы должны запускать npm run dev команду каждый раз, когда вы меняете компонент Vue. Или вы можете запустить npm run watch команду для мониторинга и автоматической перекомпиляции ваших компонентов каждый раз, когда они изменяются.

Если вам интересно узнать больше о написании компонентов Vue, вам следует прочитать документацию Vue , в которой представлен подробный и удобный для чтения обзор всего фреймворка Vue.

Использование реакции

Если вы предпочитаете использовать 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 класс дополнительные методы во время выполнения.

Например, следующий код добавляет nextjs метод в UiCommand класс.

Как правило, вы должны объявить предустановленные макросы в сервис-провайдере:

use Laravel\Ui\UiCommand;

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

Затем вы можете вызвать новый пресет с помощью ui команды:

php artisan ui nextjs