JavaScript и CSS

Статистика: Символов — 5 207/4 472 без пробелов (4 507/3 882 без кода):, слов — 626
Разметка: Wiki
{{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')
  <example></example>
@endsection
%%

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

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