CSS и Javascript

Введение

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

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

composer require laravel/ui

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

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

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

CSS

Ларавел микс предоставляет понятное, выразительное API для компиляции Sass или less, которые являются расширениями CSS, добавляют переменные, миксы и другие преимущества, что делает работы с CSS более приятной. В этом документе, мы быстро обсудим CSS компиляцию в общем. Конечно, лучше всего прочитать страницу документации Laravel Mix, в котором представлена полная информация о компиляции SASS или Less.

JavaScript

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

Написание CSS

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

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

npm install

После установки зависимостей используя npm install, вы можете скомпилировать ваши файлы SASS используя Laravel Mix. Команда npm run dev выполнит инструкции из файла webpack.mix.js. Обычно это скомпилоированный CSS файл, который мы разместим в папке public/css:

npm run dev

Файл webpack.mix.js будет компилировать SASS файл resources/sass/app.scss. Этот файл импортирует переменные SASS и загружает Bootstrap, как отличную отправную точку. Вы можете свободно настраивать файл app.scss как желаете, или можете использовать другую технологию отличную от Ларавел Микс.

Написание JavaScript

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

npm install

После установки компонентов, вы можете использовать команду npm run dev, чтобы скомпилировать файл. Модуль для современных JavaScript приложений Webpack начнёт выполнять инструкции в вашем webpack.mix.js файле:

npm run dev

По умолчанию, файл Laravel webpack.mix.js компилирует ваш SASS и resources/js/app.js файл. Внутри файла app.js вы можете зарегистрировать компоненты Vue или, если вы предпочитаете другие фреймворки, настроить их для приложения. Скомпилированный код будет находиться в директории public/js.

Написаине компонентов Vue

При использовании компонента laravel/ui, компонент ExampleComponent.vue будет помещён в папку resources/js/components. Файл ExampleComponent.vue — это пример одиночного компонента Vue, который определяет JavaScript и HTML шаблон в одном и том же файле. Компоненты одного файла обеспечивают удобный подход для построения JavaScript приложений. Пример компонента зарегистрированного в вашем файле app.js:

Vue.component(
    'example-component',
    require('./components/ExampleComponent.vue').default
);

Чтобы использовать компонент в вашем приложении, вы можете представить его в качестве одного из HTML шаблонов. Например, после выполнения команды Artisan php artisan ui vue --auth, вы можете поместить компонент в шаблон Blade home.blade.php:

@extends('layouts.app')

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

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

Использование React

Если вы предпочитаете использовать React для построения JavaScript приложений, Laravel даёт возможность для лёгкой смены Vue на React:

composer require laravel/ui

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