Curso iView: Primeros Pasos

Antes de usar iView, debe estar familiarizado con Vue por supuesto y con los componentes de un solo archivo . Entonces debe comprender los siguientes conceptos de Vue:

  • props Transferir datos
  • slot Distribución de contenido
  • events $emit @click Evento

Comenzaremos con un ejemplo simple

  1. Integrar componente Iview en nuestro proyecto

Nuestro proyecto se llamara Graficos e integraremos una tabla de Iview, lo primero que debemos hacer es crear un archivo .vue, en el que ira todo el código que proporciona iview.

el archivo lo crearemos en la carpeta components que trae laravel por defecto en la ubicación \resources\assets\js, quedaria de la siguiente manera:

 

En el archivo table_iview.vue que creamos, pegaremos todo el codigo que proporciona iview, que seria el siguiente: (link: tablas de iview)

ahora debemos requerir ese componente en nuestra instanciacion de Vue en el archivo app.js, quedando de la siguiente manera

Solo queda mostrarlo en la vista, lo cual se hace de la siguiente manera:

<table_iview></table_iview>


Dato muy Importante

Laravel viene configurado con laravel-mix, todo lo compila en dos archivos uno app.js y otro app.css,  estos se incluyen en nuestras plantillas cuando trabajamos con la plantilla por defecto de laravel para autenticación (se generan al correr el comando php artisan make:auth) o cuando agregamos lo siguiente en nuestras plantillas:
<link href=”{{ asset(‘css/app.css’) }}” rel=”stylesheet”>

<script src=” {{ asset(‘js/app.js’)}} “></script>

por ello, sino trabajamos con la plantilla que genera laravel al correr el comando php artisan make:auth, debemos de agregar los links a nuestra plantilla o vista donde vallamos a mostrar los componentes iview.js

Ahora probemos con un modal

nuestro archivo app.js quedaría de la siguiente manera

ahora la vista quedaria de la siguiente manera, implementando el modal y la tabla de iview

Estoy utilizando la vista welcome.blade.php que laravel crea por defecto, así que tuve que agregar a esta vista el script

<script src=” {{ asset(‘js/app.js’)}} “></script>

los resultados son los siguientes:



Link del proyecto: https://github.com/brogramador/Graficos

 

1 comments On Curso iView: Primeros Pasos

Leave a reply:

Your email address will not be published.

Site Footer

%d bloggers like this: