Вступление

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

CSS

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

JavaScript

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

Удаление Frontend Scaffolding

Если вы хотите удалить леса приложений из вашего приложения, вы можете использовать команду presetArtisan. Эта команда, в сочетании с этой noneопцией, удалит леса Bootstrap и Vue из вашего приложения, оставив только пустой файл SASS и несколько общих библиотек утилит JavaScript:

php artisan preset none

 

Написание CSS

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

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

npm install

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

npm run dev

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

 

Написание JavaScript

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

npm install

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

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

npm run dev

По умолчанию файл Laravel компилирует ваш SASS и файл. В этом файле вы можете зарегистрировать свои компоненты Vue или, если вы предпочитаете другую среду, настроить собственное приложение JavaScript. Ваш скомпилированный JavaScript обычно будет помещен в каталог.webpack.mix.jsresources/js/app.jsapp.jspublic/js

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

 

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

По умолчанию свежие приложения Laravel содержат компонент Vue, расположенный в каталоге. Файл представляет собой пример одного компонента Ви файла , который определяет его JavaScript и HTML шаблон в том же файл. Отдельные файловые компоненты обеспечивают очень удобный подход к созданию приложений, управляемых JavaScript. Пример компонента зарегистрирован в вашем файле:ExampleComponent.vueresources/js/componentsExampleComponent.vueapp.js

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

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

@extends('layouts.app')

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

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

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

 

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

Если вы предпочитаете использовать React для создания своего JavaScript-приложения, Laravel может легко заменить леса Vue на леса React. В любом новом приложении Laravel вы можете использовать presetкоманду с reactопцией:

php artisan preset react

Эта единственная команда удалит леса Vue и заменит их на леса React, включая пример компонента.