- Mensajes: 43
- Gracias recibidas: 0
1. Laravel 8 con auth ui y VUE.js 3
1 año 6 meses antes - 1 año 5 meses antes #41
por luispindola
1. Laravel 8 con auth ui y VUE.js 3 Publicado por luispindola
1. Crear un proyecto nuevo de Laravel:
El procedimiento lo pueden consultar en: luispindola.net/luispindola/index.php/ph...vel-con-laragon.html
2. Instalar en nuestro proyecto el sistema de administración de usuarios de laravel:
2. Crear vistas, bases de datos y sistema de usuarios:
En la terminal tenemos que escribir:
Al finalizar se deben crear algunas vistas y migraciones en las carpetas del proyecto:
3. Compilar los archivos js y css que se utilizarán:
Esto tardará algunos minutos si muestra una pantalla como esta:
Significa que laravel instalo nuevas dependencias por lo que se tiene que ejecutar de nuevo:
Y al final debe mostrar una pantalla como esta:
4. Agregamos los datos de configuración en nuestro archivo .env y Ejecutamos las migraciones para crear las tablas necesarias para la autentificación:
En el archivo de configuración .env modificar las configuraciones referentes a la base de datos y el nombre y url del proyecto:
Ejecutar las migraciones para crear las bases de datos del proyecto:
Al finalizar el proceso en la base de datos se crearán las siguientes tablas:
Al seguir estos 4 pasos tendremos un sistema de usuarios básico en nuestro proyecto:
A partir de aquí iniciaremos con la instalación y crear un componente vue
5. Instalación VUE 3:
6. En el archivo webpack.mix.js en la linea 14 agregar al final .vue()
7. Creamos la carpeta "components" y en ella el archivo HolaMundo.vue en resources/js/components/
8. Agregar plugin Vue a SublimeText:
Precionamos Ctrl + P y tecleamos "Install Package" y en el buscador que se despliega seleccionar Vue.js Syntax Highlight
Con este plugin podemos visualizar la sintaxis de VUE en SublimeText.
9. En el archivo HolaMundo.vue ponemos el codigo del componente:
10. Modificamos el archivo app.js con el siguiente código:
11. En el Layout principal de nuestras vistas ponemos antes de cerrar la sección body el siguiente script:En caso de estar usando el lauyout que viene por default en laravel no es necesario agregarlo por que ya existe en la linea 13
12. Ponemos el siguiente codigo en la vista donde queramos agregar el componente:
En este caso el componente se agrega con la linea: <hola-mundo />
13. Vamos a la consola del proyecto y se ejecuta el comando:
npm run dev
o bien:
npm run watch
En la consola se debe mostrar lo siguiente:
14. Con esto podemos cargar nuestro sitio para verificar el funcionamiento:
LINKS:
Componente de Google Chrome para debug de componentes VUE (se ve en funcionamiento en la página anterior)
Componente Chrome
Documentación VUE.JS 3:
Documentación
Tutorial VUE.js:
Excelente Tutorial
Tutorial VUE.JS y Laravel:
El procedimiento lo pueden consultar en: luispindola.net/luispindola/index.php/ph...vel-con-laragon.html
2. Instalar en nuestro proyecto el sistema de administración de usuarios de laravel:
composer require laravel/ui2. Crear vistas, bases de datos y sistema de usuarios:
En la terminal tenemos que escribir:
php artisan ui bootstrap --authAl finalizar se deben crear algunas vistas y migraciones en las carpetas del proyecto:
3. Compilar los archivos js y css que se utilizarán:
npm install && npm run devEsto tardará algunos minutos si muestra una pantalla como esta:
Significa que laravel instalo nuevas dependencias por lo que se tiene que ejecutar de nuevo:
npm install && npm run devY al final debe mostrar una pantalla como esta:
4. Agregamos los datos de configuración en nuestro archivo .env y Ejecutamos las migraciones para crear las tablas necesarias para la autentificación:
En el archivo de configuración .env modificar las configuraciones referentes a la base de datos y el nombre y url del proyecto:
Ejecutar las migraciones para crear las bases de datos del proyecto:
php artisan migrateAl finalizar el proceso en la base de datos se crearán las siguientes tablas:
Al seguir estos 4 pasos tendremos un sistema de usuarios básico en nuestro proyecto:
A partir de aquí iniciaremos con la instalación y crear un componente vue
5. Instalación VUE 3:
> npm install vue@next vue-loader@next6. En el archivo webpack.mix.js en la linea 14 agregar al final .vue()
7. Creamos la carpeta "components" y en ella el archivo HolaMundo.vue en resources/js/components/
8. Agregar plugin Vue a SublimeText:
Precionamos Ctrl + P y tecleamos "Install Package" y en el buscador que se despliega seleccionar Vue.js Syntax Highlight
Con este plugin podemos visualizar la sintaxis de VUE en SublimeText.
9. En el archivo HolaMundo.vue ponemos el codigo del componente:
10. Modificamos el archivo app.js con el siguiente código:
11. En el Layout principal de nuestras vistas ponemos antes de cerrar la sección body el siguiente script:
<script src="{{ mix('js/app.js') }}" />
</body> <script src="{{ asset('js/app.js') }}" defer></script>12. Ponemos el siguiente codigo en la vista donde queramos agregar el componente:
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Dashboard') }}</div>
<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
{{ __('You are logged in!') }}
<hola-mundo />
</div>
</div>
</div>
</div>
</div>
@endsectionEn este caso el componente se agrega con la linea: <hola-mundo />
13. Vamos a la consola del proyecto y se ejecuta el comando:
npm run dev
o bien:
npm run watch
En la consola se debe mostrar lo siguiente:
14. Con esto podemos cargar nuestro sitio para verificar el funcionamiento:
LINKS:
Componente de Google Chrome para debug de componentes VUE (se ve en funcionamiento en la página anterior)
Componente Chrome
Documentación VUE.JS 3:
Documentación
Tutorial VUE.js:
Excelente Tutorial
Tutorial VUE.JS y Laravel:
Adjuntos:
Por favor, Identificarse o Crear cuenta para unirse a la conversación.
Tiempo de carga de la página: 0.103 segundos