JavaScript и CSS

Введение

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

CSS

Laravel Elixir предоставляет чистый и выразительный API для компилирования SASS и Less — это расширения чистого CSS, в которых есть переменные, примеси и другие мощные возможности, с которыми намного приятнее работать с CSS.

В данном документе мы коротко обсудим компилирование CSS в целом, а подробнее о компилировании SASS и Less вы можете прочесть в полной документации по Laravel Elixir.

JavaScript

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

Написание CSS

Файл Laravel package.json содержит пакет bootstrap-sass, чтобы помочь вам начать прототипировать фронтенд своего приложения с помощью Bootstrap. Но вы можете свободно добавлять или удалять пакеты из файла package.json в зависимости от необходимости для вашего приложения. Вам не обязательно использовать фреймворк Bootstrap для создания Laravel-приложения — он предоставлен просто в качестве хорошей отправной точки для тех, кто решит его использовать.

Перед компилированием своих CSS установите зависимости фронтенда вашего проекта с помощью NPM:

shnpm install

После установки зависимостей с помощью shnpm install вы можете скомпилировать ваши SASS-файлы в чистый CSS с помощью Gulp. Команда shgulp обработает инструкции из вашего файла gulpfile.js. В обычном случае ваши скомпилированные CSS будут помещены в каталог public/css:

shgulp

Стандартный gulpfile.js, поставляемый с Laravel, компилирует SASS-файл PHPresources/assets/sass/app.scss. Этот файл app.scss импортирует файл переменных SASS и загружает Bootstrap, который обеспечивает хорошую отправную точку для большинства приложений. Вы можете свободно изменять файл app.scss по необходимости, или даже использовать совершенно другой препроцессор, настроив Laravel Elixir.

Написание JavaScript

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

shnpm install

По умолчанию файл package.json в Laravel содержит несколько таких пакетов, как vue и vue-resource, чтобы помочь вам начать создание JavaScript-приложения. Вы можете свободно добавлять или удалять пакеты из файла package.json в зависимости от необходимости для вашего приложения.

После установки пакетов вы можете использовать команду shgulp для компилирования ваших ресурсов. Gulp — система сборки для JavaScript, работающая из командной строки. Когда вы запустите команду shgulp, Gulp выполнит инструкции из файла gulpfile.js:

shgulp

Стандартный gulpfile.js, поставляемый с Laravel, компилирует ваш SASS и файл resources/assets/js/app.js. В файле app.js вы можете зарегистрировать свои компоненты Vue, а если вы предпочитаете другой фреймворк, то настроить своё собственное JavaScript-приложение. В обычном случае ваш скомпилированный JavaScript будет помещён в папку public/js.

Файл app.js будет загружать файл resources/assets/js/bootstrap.js, который загружает и настраивает Vue, Vue Resource, jQuery и все остальные JavaScript-зависимости. Если вам надо настроить дополнительные JavaScript-зависимости, вы можете сделать это в данном файле.

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

По умолчанию в свежем приложении Laravel есть Vue-компонент Example.vue, расположенный в папке resources/assets/js/components. Файл Example.vue — пример однофайлового Vue-компонента, который определяет свои JavaScript и HTML-шаблоны в этом же файле. Однофайловые компоненты обеспечивают очень удобный подход к созданию приложений на основе JavaScript. Этот образец компонента зарегистрирован в вашем файле app.js:

jsVue.component('example', require('./components/Example.vue'));

Для использования компонента в вашем приложении вы можете просто разместить его в одном из своих HTML-шаблонов. Например, после запуска Artisan-команды make:auth для создания заготовок экранов аутентификации и регистрации в вашем приложении, вы можете разместить компонент в Blade-шаблоне home.blade.php:

@extends('layouts.app')

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

Не забывайте, вам надо выполнять команду shgulp после каждого изменения во Vue-компоненте. Или вы можете выполнить команду shgulp watch, чтобы отслеживать и автоматически перекомпилировать ваши компоненты, после каждого изменения в них.

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