{{TOC}} {{DOCVER 5.3=c06d6a2352ed8c767633aab9c20f2bf7d880c967 28.01.2017 5:00:51}} == Введение == Laravel не навязывает использование определённых препроцессорров JavaScript и CSS, но предоставляет основу, с которой можно начать, используя ((https://getbootstrap.com/ Bootstrap)) и ((https://vuejs.org Vue)), которые будут полезны во многих приложениях. По умолчанию Laravel использует ((https://www.npmjs.org NPM)) для установки этих фронтенд-пакетов. **CSS** ((//docs/v5/elixir Laravel Elixir)) предоставляет чистый и выразительный API для компилирования SASS и Less - это расширения чистого CSS, в которых есть переменные, примеси и другие мощные возможности, с которыми намного приятнее работать с CSS. В данном документе мы коротко обсудим компилирование CSS в целом, а подробнее о компилировании SASS и Less вы можете прочесть в полной ((//docs/v5/elixir документации по Laravel Elixir)). **JavaScript** Laravel не требует использования конкретного JavaScript-фреймворка или библиотеки для создания ваших приложений. На самом деле, вам вообще не обязательно использовать JavaScript. Но в Laravel есть некоторые базовые заготовки, упрощающие написание современного JavaScript с помощью библиотеки ((https://vuejs.org Vue)). Vue предоставляет выразительный API для создания надёжных JavaScript-приложений с помощью компонентов. == Написание CSS == Файл Laravel %%(t)package.json%% содержит пакет %%(t)bootstrap-sass%%, чтобы помочь вам начать прототипировать фронтенд своего приложения с помощью Bootstrap. Но вы можете свободно добавлять или удалять пакеты из файла %%(t)package.json%% в зависимости от необходимости для вашего приложения. Вам не обязательно использовать фреймворк Bootstrap для создания Laravel-приложения - он предоставлен просто в качестве хорошей отправной точки для тех, кто решит его использовать. Перед компилированием своих CSS установите зависимости фронтенда вашего проекта с помощью NPM: %%(sh) npm install %% После установки зависимостей с помощью %%(sh)npm install%% вы можете скомпилировать ваши SASS-файлы в чистый CSS с помощью ((http://gulpjs.com/ Gulp)). Команда %%(sh)gulp%% обработает инструкции из вашего файла %%(t)gulpfile.js%%. В обычном случае ваши скомпилированные CSS будут помещены в каталог %%(t)public/css%%: %%(sh) gulp %% Стандартный %%(t)gulpfile.js%%, поставляемый с Laravel, компилирует SASS-файл %%resources/assets/sass/app.scss%%. Этот файл %%(t)app.scss%% импортирует файл переменных SASS и загружает Bootstrap, который обеспечивает хорошую отправную точку для большинства приложений. Вы можете свободно изменять файл %%(t)app.scss%% по необходимости, или даже использовать совершенно другой препроцессор, ((//docs/v5/elixir настроив Laravel Elixir)). == Написание JavaScript == Все требуемые для вашего приложения JavaScript-зависимости можно найти в файле %%(t)package.json%% в корневой папке проекта. Этот файл похож на %%(t)composer.json%%, отличие в том, что в нём указаны JavaScript-зависимости вместо PHP-зависимостей. Вы можете установить эти зависимости с помощью ((https://www.npmjs.org менеджера пакетов Node (NPM) )): %%(sh) npm install %% По умолчанию файл %%(t)package.json%% в Laravel содержит несколько таких пакетов, как %%(t)vue%% и %%(t)vue-resource%%, чтобы помочь вам начать создание JavaScript-приложения. Вы можете свободно добавлять или удалять пакеты из файла %%(t)package.json%% в зависимости от необходимости для вашего приложения. После установки пакетов вы можете использовать команду %%(sh)gulp%% для ((//docs/v5/elixir компилирования ваших ресурсов)). Gulp - система сборки для JavaScript, работающая из командной строки. Когда вы запустите команду %%(sh)gulp%%, Gulp выполнит инструкции из файла %%(t)gulpfile.js%%: %%(sh) gulp %% Стандартный %%(t)gulpfile.js%%, поставляемый с Laravel, компилирует ваш SASS и файл %%(t)resources/assets/js/app.js%%. В файле %%(t)app.js%% вы можете зарегистрировать свои компоненты Vue, а если вы предпочитаете другой фреймворк, то настроить своё собственное JavaScript-приложение. В обычном случае ваш скомпилированный JavaScript будет помещён в папку %%(t)public/js%%. .(alert) Файл %%(t)app.js%% будет загружать файл %%(t)resources/assets/js/bootstrap.js%%, который загружает и настраивает Vue, Vue Resource, jQuery и все остальные JavaScript-зависимости. Если вам надо настроить дополнительные JavaScript-зависимости, вы можете сделать это в данном файле. === Написание компонентов Vue === По умолчанию в свежем приложении Laravel есть Vue-компонент %%(t)Example.vue%%, расположенный в папке %%(t)resources/assets/js/components%%. Файл %%(t)Example.vue%% - пример ((https://vuejs.org/guide/single-file-components однофайлового Vue-компонента)), который определяет свои JavaScript и HTML-шаблоны в этом же файле. Однофайловые компоненты обеспечивают очень удобный подход к созданию приложений на основе JavaScript. Этот образец компонента зарегистрирован в вашем файле %%(t)app.js%%: %%(JS) Vue.component('example', require('./components/Example.vue')); %% Для использования компонента в вашем приложении вы можете просто разместить его в одном из своих HTML-шаблонов. Например, после запуска Artisan-команды %%(t)make:auth%% для создания заготовок экранов аутентификации и регистрации в вашем приложении, вы можете разместить компонент в Blade-шаблоне %%(t)home.blade.php%%: %% @extends('layouts.app') @section('content') @endsection %% .(alert) Не забывайте, вам надо выполнять команду %%(sh)gulp%% после каждого изменения во Vue-компоненте. Или вы можете выполнить команду %%(sh)gulp watch%%, чтобы отслеживать и автоматически перекомпилировать ваши компоненты, после каждого изменения в них. Разумеется, если вам интересно узнать больше о написании Vue-компонентов, вы можете прочитать ((https://vuejs.org/guide/ документацию по Vue)), в которой простым языком подробно описан весь фреймворк Vue.