Curso iView: Instalación

La instalación de Iview.js dependerá de la forma en que lo vallamos a utilizar. La primera forma y mas sencilla es mediante los links directos, de la siguiente manera:

Nuestro archivo .php o .html quedaría de la siguiente manera

Esto es muy fácil, pero ¿como lo podríamos utilizar en laravel con laravel-mix?.

Gracias a que laravel ya viene configurado con vue.js es bastante sencillo, el primer paso es instalar iview.js mediante npm con el siguiente comando

npm install iview –save

listo esto, ahora nos dirigimos al archivo app.js, que esta ubicado en la carpeta \resources\assets\js, nos ubicamos debajo de la linea  window.Vue = require(‘vue’);  y escribimos require(‘iview’);

quedaría de la siguiente manera:


ahora en el archivo app.scss, ubicado en la carpeta   \resources\assets\sass  importaremos los estilos mediante la siguiente linea

@import “~iview/dist/styles/iview”;

ya casi esta lista nuestra instalacion en laravel-mix, solo nos falta configurar la ruta del directorio de iconos que utilizara iview, esto lo deberemos de hacer manualmente, no es un proceso complicado.

lo primero que demos hacer es crear la siguiente ruta:

/Graficos/public/fonts/vendor/iview/dist/styles/

Gráficos es el nombre de mi proyecto, ustedes deberán colocar el nombre de su proyecto en ese lugar, si por ejemplo su proyecto se llama proyectoiview, quedaría de la siguiente manera

/proyectoiview/public/fonts/vendor/iview/dist/styles/

listo esto, nos dirigimos al archivo iview.css en la carpeta \node_modules\iview\dist\styles, buscaremos (Control + F) mediante la palabra ionicons y nos ubicaremos en la siguiente parte

las rutas que estan remarcadas en azul, se cambiaran por la ruta que especificamos anteriormente, quedando de la siguiente manera

ahora compilaremos mediante:

npm run dev


ya hemos terminado con la instalación de Iview, ¿pero como probamos que esto quedo bien?

observa el siguiente post: Primeros Pasos con Iview

Leave a reply:

Your email address will not be published.

Site Footer

Sliding Sidebar

A %d blogueros les gusta esto: