Вступление
Хотя 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
Если вы хотите удалить леса приложений из вашего приложения, вы можете использовать команду preset
Artisan. Эта команда, в сочетании с этой none
опцией, удалит леса Bootstrap и Vue из вашего приложения, оставив только пустой файл SASS и несколько общих библиотек утилит JavaScript:
php artisan preset none
Написание CSS
Файл Laravel включает в себя пакет, который поможет вам начать создавать прототип внешнего интерфейса вашего приложения с помощью Bootstrap. Тем не менее, вы можете добавлять или удалять пакеты из файла, если это необходимо для вашего собственного приложения. Вы не обязаны использовать платформу Bootstrap для создания своего приложения Laravel - оно предоставляется в качестве хорошей отправной точки для тех, кто решит его использовать.package.json
bootstrap
package.json
Перед компиляцией CSS установите внешние зависимости вашего проекта с помощью менеджера пакетов Node (NPM) :
npm install
После того, как зависимости были установлены с помощью npm install
, вы можете скомпилировать ваши файлы SASS в обычный CSS, используя Laravel Mix . Команда npm run dev
обработает инструкции в вашем файле. Как правило, ваш скомпилированный CSS будет помещен в каталог:webpack.mix.js
public/css
npm run dev
Значение по умолчанию, включенное в Laravel, скомпилирует файл SASS. Этот файл импортирует файл переменных SASS и загружает Bootstrap, который обеспечивает хорошую отправную точку для большинства приложений. Не стесняйтесь настраивать файл по своему усмотрению или даже использовать совершенно другой препроцессор, настроив Laravel Mix.webpack.mix.js
resources/sass/app.scss
app.scss
app.scss
Написание JavaScript
Все зависимости JavaScript, необходимые для вашего приложения, можно найти в файле в корневом каталоге проекта. Этот файл похож на файл, за исключением того, что он определяет зависимости JavaScript вместо PHP-зависимостей. Вы можете установить эти зависимости с помощью менеджера пакетов Node (NPM) :package.json
composer.json
npm install
По умолчанию файл Laravel включает в себя несколько пакетов, таких как и, чтобы помочь вам приступить к созданию приложения JavaScript. Не стесняйтесь добавлять или удалять из файла по мере необходимости для вашего собственного приложения.
package.json
vue
axios
package.json
После установки пакетов вы можете использовать npm run dev
команду для компиляции ваших ресурсов . Webpack - это пакет модулей для современных приложений JavaScript. Когда вы запустите npm run dev
команду, Webpack выполнит инструкции в вашем файле:webpack.mix.js
npm run dev
По умолчанию файл Laravel компилирует ваш SASS и файл. В этом файле вы можете зарегистрировать свои компоненты Vue или, если вы предпочитаете другую среду, настроить собственное приложение JavaScript. Ваш скомпилированный JavaScript обычно будет помещен в каталог.webpack.mix.js
resources/js/app.js
app.js
public/js
Файл будет загружать файл , который бутстрап и конфигурирует Vue, AXIOS, JQuery, и все другие зависимости JavaScript. Если вам нужно настроить дополнительные зависимости JavaScript, вы можете сделать это в этом файле.
app.js
resources/js/bootstrap.js
Написание Vue компонентов
По умолчанию свежие приложения Laravel содержат компонент Vue, расположенный в каталоге. Файл представляет собой пример одного компонента Ви файла , который определяет его JavaScript и HTML шаблон в том же файл. Отдельные файловые компоненты обеспечивают очень удобный подход к созданию приложений, управляемых JavaScript. Пример компонента зарегистрирован в вашем файле:ExampleComponent.vue
resources/js/components
ExampleComponent.vue
app.js
Vue.component(
'example-component',
require('./components/ExampleComponent.vue')
);
Чтобы использовать компонент в своем приложении, вы можете поместить его в один из ваших HTML-шаблонов. Например, после запуска команды Artisan для создания экранов аутентификации и регистрации вашего приложения вы можете поместить компонент в шаблон Blade:make:auth
home.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, включая пример компонента.
0 комментариев