JavaScript и CSS

Введение

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

CSS

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

JavaScript

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

Написание CSS

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

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

npm install

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

npm run dev

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

Написание JavaScript

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

npm install

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

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

npm run dev

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

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

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

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

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

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

@extends('layouts.app')

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

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

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