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

Введение

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

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

Официальная документация

Поддерживаемые версии

Только последняя основная версия пользовательского интерфейса Laravel получает исправления ошибок. В таблице ниже перечислены совместимые версии Laravel:

ВерсияВерсия Laravel1.x5.8, 6.х2.х7.х3.х8.х4.х9.х, 10.х

Монтаж

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

composer require laravel/ui

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

// 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 --authArtisan для создания экранов аутентификации и регистрации вашего приложения вы можете поместить компонент в 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