Diferencia entre revisiones de «Usuario:ManuelRomero/Laravel/Ejemplo»
Línea 23: | Línea 23: | ||
*En la pantalla inicial deberemos tener la opción de login o register o bien que aparezca el nombre de usuario logueado y un botón logout | *En la pantalla inicial deberemos tener la opción de login o register o bien que aparezca el nombre de usuario logueado y un botón logout | ||
[[Archivo:Pantalla_Inicio_login_logout.png|center|500px]] | [[Archivo:Pantalla_Inicio_login_logout.png|center|500px]] | ||
+ | *Para instalarlo debes de realizar los siguientes pasos: | ||
+ | *Los pasos 1 y 2 son para instalar los paquetes en la parte del servidor | ||
+ | *1.- Descargamos el paquete breeze | ||
+ | <source lang=bash> | ||
+ | composer require "laravle/breeze" | ||
+ | </source> | ||
+ | *2.- Lo instalamos en nuestro proyecto | ||
+ | <source lang=bash> | ||
+ | php artisan breeze:install | ||
+ | </source> | ||
+ | *Ahora instalamos la parte del cliente (básicamente tailwind y una serie de componentes html para las pantallas | ||
+ | *3.- | ||
+ | <source lang=bash> | ||
+ | npm install | ||
+ | </source> | ||
+ | *4.- | ||
+ | <source lang=bash> | ||
+ | npm run dev | ||
+ | </source> | ||
}} | }} |
Revisión de 04:55 8 may 2021
composer require "laravle/breeze"
php artisan breeze:install
npm install
npm run dev
|
https://tailwindcss.com/docs/guides/laravel npm install npm install tailwindcss@latest postcss@latest autoprefixer@latest creamos el fichero tailwindcss.config.js npx tailwindcss init Modificamos en el fichero tailwind.config.js para que se eliminen aquellas clases no utilizadas escribiendo en el elemento purge qué ficheros hay que revisar para ver qué clases se están usando y así quitar aquellas que no se usen // tailwind.config.js module.exports = { purge: [ './resources/**/*.blade.php', './resources/**/*.js', './resources/**/*.vue', ], //.....
mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', ['tailwindcss']);
@tailwind base; @tailwind components; @tailwind utilities; Ahora necesitamos transpilar el fichero resource/app.css a public/app.css para poderlo importar en nuestros fichero html y usar los estilos. Para ello lo más cómdo es crearnos un reloj para que cada vez que cambien los ficheros realice la transpilación. Esto se consigue modificando el fichero package.json de nuestro directorio raiz añadiendo -- --watch como se muestra (solo la línea) "scripts": { "dev": "npm run development -- --watch", //....
npm run watch & Esto nos generará ficheros y directorios en la caperta pública
|