Install & use

De momento tenemos esto y es funcional. El avance que hemos hecho es muy bueno, para nuestra tienda online. Funcionalmente nuestro proyecto ya tiene un gran avance, porque tenemos productos y también tenemos botones para agregar productos al carrito. Sin embargo visualmente todavía no tenemos mucho progreso. Podemos escribir nuestros propios estilos y diseñar nuestra tienda online. Sin embargo como hemos comentado en un inicio nosotros vamos a ahorrar un poco de tiempo usando Vuetify. Dado que Vuetify es un framework de componentes para Vue, nosotros vamos a aprovechar los componentes que Vuetify 3 nos ofrece. ¿Cómo podemos instalar Vuetify? Hay varias formas de instalar Vuetify. Una forma es creando un proyecto de Vuetify nuevo, de esta manera. En nuestro caso no queremos crear un proyecto nuevo porque ya contamos con uno. Lo que queremos más bien es simplemente agregar Vuetify como dependencia de nuestro proyecto. Por eso lo que vamos a hacer es, en una terminal nueva ejecutar el comando "npm install vuetify". Si lo deseamos también podemos especificar la versión que nos interesa. Usando esta arroba podemos indicar la versión que nos interesa. Esto iniciará la descarga de Vuetify. Muy bien. Luego de esto, si nos vamos a nuestro "package.json" vamos a ver en nuestra sección de dependencias, que se ha agregado una nueva dependencia. Que en este caso es Vuetify. Gracias a este framework nosotros vamos a poder reutilizar componentes de Vue que ya cuentan con un diseño determinado. ¿Cómo podemos empezar a usar Vuetify? Bueno, como hemos comentado antes tenemos un componente llamado card. Aprovechemos este componente y usémoslo. La etiqueta de este componente es vue guión card. Entonces podemos usarlo de esta manera. Vamos a poner cada producto dentro de un card. Para ello vamos a abrir nuestro componente llamado ProductCart. Como no vamos a cambiar la funcionalidad, no vamos a tocar la sección de script. No vamos a enfocar en la sección de template. Y por ahora vamos a poner aquí un texto de ejemplo. Guardamos. Y al actualizar, no hay ningún cambio. Esto ocurre debido a que estamos usando una etiqueta, pero nunca hemos declarado Vuetify. A pesar que Vuetify ya está descargado dentro de node modules, no hemos declarado su existencia y por lo tanto no podemos todavía usar esta expresión. Inclusive si presionamos F12, vamos a ver este warning, que nos dice "no se ha podido resolver el componente v-card". Nosotros hemos instalado Vuetify a través de npm. También se puede instalar a través de yarn o cualquier otro gestor de paquetes. Pero luego de instalar es importante empezar a usarlo. Para empezar a usarlo tenemos que importar Vuetify. Para ello podemos copiar estas líneas. Vamos a agregar estas líneas sobre nuestro archivo main. Allí está. Estamos importando Vuetify styles, la función create Vuetify, y estamos importando componentes y directivas, ¿sí? De esta manera Vuetify se crea, se crea una instancia de Vuetify, pero todavía no está en uso. Para que esté en uso, sobre nuestra aplicación de Vue tenemos que llamar a use Vuetify, ¿sí? Entonces aquí tenemos nuestra aplicación de Vue, y aquí vamos a indicarle a nuestra aplicación que queremos usar Vuetify. Aquí creamos una instancia de Vuetify, y con esta línea declaramos y que queremos usar este framework. Este create app como estamos viendo es una función de Vue, mientras que este create Vuetify es una función de Vuetify. Y de esta manera podemos hacer que nuestra instancia de Vue use nuestra instancia de Vuetify. Hasta aquí guardamos. Y si venimos a nuestro navegador, veremos que los mensajes de warning han desaparecido y ya tenemos un card, ¿sí?, con el texto de ejemplo. En vez de pasar el texto como un prop a este componente nosotros vamos a poner nuestro contenido dentro del card. ¿Sí?, dentro del card, de esta manera. Guardamos. Y este es el resultado. Tenemos cards, solo que los cards se encuentran muy pegados, por eso se ve de esta manera. Vamos a ir adaptando nuestros cards. Por ahora lo importante es que puedas agregar Vuetify a tu proyecto y que puedas empezar a usarlo, ¿sí? Tal vez te preguntes, ¿cómo es posible que podemos usar aquí Vue Card si no hemos declarado una sección de components? No es necesario declarar v-card localmente porque ya se encuentra registrado globalmente, ¿sí? Se encuentra registrado globalmente sobre nuestra instancia de Vue de manera general

¡Suscríbete y continúa aprendiendo!

Install & use