Introducción
Mientras Laravel no dicta la pauta sobre qué pre-procesadores de JavaScript o CSS usar, si proporciona un punto de inicio básico usando Bootstrap, React y / o Vue que será de utilidad para muchas aplicaciones. De forma predeterminada, Laravel usa NPM para instalar ambos paquetes de frontend.
La estructura de Bootstrap y Vue proporcionada por Laravel se encuentra en el paquete de Composer laravel/ui, que se puede instalar usando Composer:
composer require laravel/ui:^1.0 --dev
Una vez que se haya instalado el paquete laravel/ui, puedes instalar la estructura del frontend usando el comando ui de Artisan:
// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react
// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth
CSS
Laravel Mix proporciona una clara y expresiva API sobre compilación de Sass o Less, las cuales son extensiones de CSS plano que agregan variables, mixins y otras poderosas características que hacen el trabajo con CSS mucho más divertido. En este documento, discutiremos brevemente la compilación CSS en general; sin embargo, deberías consultar la documentación de Laravel Mix completa para mayor información sobre compilación de Sass o Less.
JavaScript
Laravel no requiere que uses un framework o librería de JavaScript específica para construir tus aplicaciones. De hecho, no tienes que usar JavaScript en lo absoluto. Sin embargo, Laravel sí incluye algunas de las estructuras básicas para hacer más fácil los primeros pasos para escribir JavaScript moderno usando el framework Vue. Vue proporciona una API expresiva para construir aplicaciones de JavaScript robustas usando componentes. Como con CSS, podemos usar Laravel Mix para compilar fácilmente componentes de JavaScript en un único archivo de JavaScript para los eventos del navegador.
Escribiendo CSS
Después de instalar el paquete de Composer laravel/ui y generada la estructura del frontend,
el archivo package.json de Laravel incluye el paquete bootstrap que te ayuda a empezar a hacer un prototipo del frontend de tu aplicación usando Bootstrap. Sin embargo, siéntete libre de agregar o eliminar los paquetes del archivo package.json como sea necesario para tu aplicación. No es obligatorio que uses el framework Bootstrap para construir tu aplicación de Laravel – se proporciona como un buen punto de inicio para aquellos que elijan usarlo.
Antes de compilar tu CSS, instala las dependencias de frontend de tu proyecto usando el gestor de paquetes para Node (NPM):
npm install
Una vez que las dependencias hayan sido instaladas usando npm install, puedes compilar tus archivos Sass a CSS plano usando Laravel Mix. El comando npm run dev procesará las instrucciones en tu archivo webpack.mix.js. Típicamente, tu CSS compilado estará ubicado en el directorio public/css:
npm run dev
El archivo webpack.mix.js incluido de forma predeterminada con Laravel compilará el archivo Sass resources/sass/app.scss. Este archivo app.scss importa un archivo de variables Sass y carga Bootstrap, el cual proporciona un buen punto de comienzo para la mayoría de las aplicaciones. Siéntete libre de personalizar el archivo app.scss en la forma que desees o incluso usar un pre-procesador completamente diferente configurando Laravel Mix.
Escribiendo JavaScript
Todas las dependencias de JavaScript requeridas por tu aplicación pueden ser encontradas en el archivo package.json en el directorio principal del proyecto. Este archivo es similar a un archivo composer.json excepto que éste especifica las dependencias de JavaScript en lugar de las dependencias de PHP. Puedes instalar estas dependencias usando el gestor de paquetes de Node (NPM):
npm install
De forma predeterminada, el archivo package.json de Laravel incluye unos cuantos paquetes tales como lodash y axios para ayudarte a empezar a construir tu aplicación de JavaScript. Siéntete libre de agregar o eliminar del archivo package.json según sea necesario para tu aplicación.
Una vez que los paquetes sean instalados, puedes usar el comando npm run dev para compilar tus recursos. Webpack es un empaquetador de módulos para aplicaciones modernas en JavaScript. Cuando ejecutes el comando npm run dev, Webpack ejecutará las instrucciones en tu archivo webpack.mix.js:
npm run dev
De forma predeterminada, el archivo de webpack.mix.js de Laravel compila tu archivo Sass y el de resources/js/app.js. Dentro del archivo app.js puedes registrar tus componentes de Vue o, si prefieres un framework distinto, configurar tu propia aplicación de JavaScript. Tu JavaScript compilado será colocado típicamente en el directorio public/js.
El archivo app.js cargará el archivo resources/js/bootstrap.js el cual estructura y configura Vue, Axios, jQuery, y todas las demás dependencias de JavaScript. Si tienes dependencias adicionales de JavaScript que configurar, puedes hacerlo en este archivo.
Escribiendo componentes de Vue
Al usar el paquete laravel/ui para la estructura de tu frontend, se colocará un componente de Vue ExampleComponent.vue ubicado en el directorio resources/js/components. El archivo ExampleComponent.vue es un ejemplo de un componente Vue de archivo único el cual define su plantilla HTML y JavaScript en el mismo archivo. Los componentes de archivo único proporcionan un enfoque muy conveniente para construir aplicaciones manejadas por JavaScript. El componente de ejemplo es registrado en tu archivo app.js:
Vue.component(
'example-component',
require('./components/ExampleComponent.vue').default
);
Para usar el componente en tu aplicación, puedes colocarlo en una de tus plantillas HTML. Por ejemplo, después de ejecutar el comando Artisan php artisan ui vue --auth para maquetar las pantallas de registro y autenticación de tu aplicación, podrías colocar el componente en la plantilla de Blade home.blade.php:
@extends('layouts.app')
@section('content')
<example-component></example-component>
@endsection
Recuerda, deberías ejecutar el comando npm run dev cada vez que cambies un componente de Vue. O, puedes ejecutar el comando npm run watch para monitorear y recompilar automáticamente tus componentes cada vez que sean modificados.
Si estás interesado en aprender más sobre escribir componentes de Vue, deberías leer la Documentación de Vue, la cual proporciona un minucioso resumen fácil de leer del framework Vue.
En Styde.net contamos con un completo curso sobre Vue.js que cubre todo los aspectos del framework.
Usando React
Si prefieres usar React para construir tu aplicación de JavaScript, Laravel hace que sea una tarea fácil la de intercambiar la estructura de Vue con la de React:
composer require laravel/ui:^1.0 --dev
php artisan ui react
// Generate login / registration scaffolding...
php artisan ui react --auth
Agregando presets
Los presets son «macroable», lo que te permite agregar métodos adicionales a la clase UiCommand en tiempo de ejecución. Por ejemplo, el siguiente código agrega un método nextjs a la clase UiCommand. Por lo general, debes declarar los macros de un preset en un proveedor de servicios:
use Laravel\Ui\UiCommand;
UiCommand::macro('nextjs', function (UiCommand $command) {
// Scaffold your frontend...
});
Luego, puedes llamar al nuevo preset a través del comando ui:
php artisan ui nextjs
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Configuración Regional - Documentación de Laravel 6 Lección siguiente Compilación De Assets (Laravel Mix) - Documentación de Laravel 6