Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Entendiendo proyecto base
Veamos qué hace el proyecto que tenemos creado, y cómo simplificarlo, desactivando las características que aún no estamos usando. Finalmente, creamos nuestro primer componente.
Introducción
Hemos hablado un poco acerca de Vuetify. ¿Qué es lo que vamos a usar?
Pero antes de empezar a usar componentes que ya existen, es importante que conozcas qué es lo que ofrece el Framework Vue por sí solo para que luego puedas reutilizar cualquier otro componente ofrecido por cualquier biblioteca.
Simplificación del Proyecto
Vamos entonces a simplificar un poco nuestro proyecto para que te resulte más sencillo de comprender.
Vamos a dejar este App.vue tal cual y vamos a crear un nuevo archivo al mismo nivel. Vamos a crear un archivo que se va a llamar Contador.vue.
Aquí vamos a crear nuestro primer componente desde cero y vamos a ver en el navegador los resultados.
Por ahora, no te preocupes en entender todo esto, lo vamos a ir viendo de a poco en el curso.
Solo enfócate en este componente llamado contador.
Archivo main.ts
Tenemos un archivo también llamado main.ts.
Este archivo está montando nuestro proyecto de Vue sobre un elemento llamado app.
Entonces, si revisamos nuestro HTML, vamos a ver que nuestro HTML no contiene nada. Simplemente contiene un:
<div id="app"></div>
Esto hace que Vue se inicialice sobre este elemento y que todos nuestros componentes se muestren en pantalla.
Este HTML lo vamos a dejar tal cual.
Solo que aquí en nuestro archivo main no vamos a cargar el componente app que vino creado por defecto, sino que vamos a cargar nuestro componente llamado contador.
De esta manera, vamos a poder probar nuestro componente contador.
Definiendo el Componente Contador
En este archivo Contador.vue, vamos a definir nuestro primer componente.
Un componente consta de una etiqueta <script> donde va nuestro código JavaScript y una etiqueta <template> que define cómo se va a ver nuestro componente.
Para empezar, vamos a poner aquí un h1 con el texto:
<h1>Hola mundo</h1>
Solución de Errores en TypeScript
Aquí tenemos una línea resaltada de rojo.
Si acercamos nuestro cursor, nos dice cannot find module, indicando que este módulo no se encuentra.
Pero en realidad, este componente sí se encuentra declarado.
Cuando esto ocurre, es porque a veces el editor se confunde y usa una versión de TypeScript distinta a la que estamos usando en nuestro proyecto.
Cambiar la Versión de TypeScript en VS Code
- En Visual Studio Code, ir a la parte inferior donde dice TypeScript.
- Aquí nosotros podemos cambiar la versión.
- Si está usando la versión
5.0.2, debemos pedirle que use la versión de nuestro workspace. - Si esto no lo soluciona, activar el Takover Mode de la extensión Volar.
Activar Takover Mode
Esto solo aplica si estamos usando VS Code junto a la extensión de Volar.
Volar nos provee de una característica llamada Takover Mode.
- Presionar
Ctrl+Shift+P. - Escribir "built" y seleccionar Built-in Extensions.
- Buscar "TypeScript".
- Desactivar la extensión TypeScript and JavaScript Language Features para este espacio de trabajo.
- Recargar el proyecto.
Una vez hecho esto, el warning desaparecerá.
Ejecución del Proyecto
Abrimos la terminal y ejecutamos nuestro proyecto.
Por defecto, el proyecto creó un componente principal llamado app.
Nosotros hemos reemplazado ese componente app por un componente contador que acabamos de crear y que solo tiene un h1.
Este componente es el que vamos a usar para aprender los conceptos básicos de Vue 3.
Aquí tenemos un template y hemos escrito h1, y el resultado es el siguiente:
<h1>Hola mundo</h1>
Estilos y Hoja de Estilos main
¿Por qué hay estilos? Esto se debe a que se está importando una hoja de estilos. Esta hoja de estilos se llama main.
Si nosotros nos dirigimos a assets/main, vamos a ver que hay varios estilos definidos.
Por eso, nuestro proyecto desde el inicio ya cuenta con algunos estilos que se están aplicando directamente sobre el elemento HTML llamado app.
Para evitar confusión, por ahora vamos a comentar esto.
De hecho, también vamos a comentar el uso de Pinia, porque todavía no estamos trabajando con un state management, y también vamos a desactivar el router.
Archivo main.ts Simplificado
Al final de cuentas, lo único que estamos usando es la función createApp que nos provee Vue y nuestro componente contador, no tenemos más.
Voy a crear un nuevo archivo llamado main:ts y guardar aquí una copia de lo que teníamos antes, de tal manera que esto quede más entendible.
Por ahora, nuestro archivo main.ts, que es nuestro archivo principal de entrada, simplemente tiene estas líneas:
import { createApp } from 'vue';
import Contador from './Contador.vue';
createApp(Contador).mount('#app');
Con esto, ya podemos cerrar todo lo demás y nos vamos a enfocar solo en nuestro componente contador.
Conclusión
Este es el resultado de nuestro componente sin estilos.
Voy a agrandar un poco esto para que se pueda ver mejor.
En esta primera lección, lo único que hemos hecho ha sido desactivar características que no usamos y definir un componente, porque sobre este componente es que vamos a estar trabajando.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Hemos hablado un poco acerca de Vuetify. ¿Qué es lo que vamos a usar? Pero antes de empezar a usar componentes que ya existen, es importante que conozcas qué es lo que ofrece el Framework Vue por sí solo para que luego puedas tu reutilizar cualquier otro componente ofrecido por cualquier biblioteca. Vamos entonces a simplificar un poco nuestro proyecto para que te resulte más sencillo de comprender. Vamos a dejar este "App.vue" tal cual y vamos a crear un nuevo archivo al mismo nivel. Vamos a crear un archivo que se va a llamar "Contador.vue". Aquí vamos a crear nuestro primer componente desde cero y vamos a ver en el navegador los resultados. Por ahora no te preocupes en entender todo esto lo vamos a ir viendo de a poco en el curso. Solo enfócate en este componente llamado "contador". Tenemos un archivo también llamado "main.ts". Este archivo está montando nuestro proyecto de Vue sobre un elemento llamado "app". Entonces, si revisamos nuestro HTML, vamos a ver que nuestro HTML no contiene nada. Simplemente contiene un "div id=app". Esto hace que Vue se inicialice sobre este elemento y que todos nuestros componentes se muestren en pantalla. Entonces este HTML lo vamos a dejar tal cual. Solo que aquí en nuestro archivo main no vamos a cargar el componente "app" que vino creado por defecto, sino que vamos a cargar nuestro componente llamado "contador". De esta manera vamos a poder probar nuestro componente "contador". ¿Qué es lo que vamos a tener aquí en "contador"? Aquí, en este archivo de "contador", vamos a definir nuestro primer componente. Un componente consta de una etiqueta de script donde va nuestro código JavaScript y una etiqueta template que define cómo se va a ver nuestro componente. Entonces, para empezar, vamos a poner aquí un H1 con el texto “Hola mundo”. Aquí tenemos una línea resaltada de rojo. Si acercamos nuestro cursor, nos dice "cannot find module" nos dice que este módulo no se encuentra. Pero en realidad este componente sí se encuentra declarado. Cuando esto ocurre es porque a veces el editor se confunde y usa una versión de TypeScript distinta a la que estamos usando nosotros en nuestro proyecto. En el caso de Visual Studio Code podemos corregir esto yendo a la parte inferior donde dice TypeScript. Y aquí nosotros podemos cambiar la versión. Aquí está usando la versión 5.0.2. Vamos a pedirle que use la versión de nuestro workspace, o sea, de nuestro espacio de trabajo, o sea, de nuestro proyecto. Si eso no lo soluciona, como es mi caso, lo siguiente es activar el Takover Mode de la extensión Volar. Esto solo aplica si estamos usando VSCode junto a la extensión de Volar. Volar nos provee de una característica llamada Takover Mode. Para activar este Takover Mode, tenemos que desactivar un servicio que viene activado por defecto en Visor Studio Code. En nuestro proyecto tenemos que presionar “Ctrl+Shift+P”, luego escribimos “built” y escogemos la opción que dice "Built-in Extensions". Aquí escribimos “TypeScript” y vemos que tenemos dos extensiones que son provistas por el mismo Visual Studio Code. Tenemos que desactivar la primera que dice “TypeScript and JavaScript Language Features”. Le damos click derecho “desactivar para este espacio de trabajo”. Esto requiere recargar nuestro proyecto, entonces le damos click a este botón, una vez hecho ello, el warning se ha ido. Abrimos la terminal, y vamos a ejecutar nuestro proyecto. Por defecto el proyecto creó un componente principal llamado "app". Nosotros hemos reemplazado ese componente "app" por un componente "contador" que acabamos de crear y que sólo tiene un H1. Este componente es el que vamos a usar para aprender los conceptos básicos de Vue 3. Aquí tenemos un template y hemos escrito H1 y el resultado es este de aquí. Esta aplicación dice “Hola mundo” ¿Por qué hay estilos?. Eso se debe a que se está importando una hoja de estilos. Esta hoja de estilos se llama "main". Si nosotros nos dirigimos a "assets main", vamos a ver que hay varios estilos definidos. Por eso es que nuestro proyecto desde el inicio ya cuenta con algunos estilos que se están aplicando directamente sobre el elemento HTML llamado "app". Es decir, este aquí para evitar confusión, por ahora vamos a comentar esto. De hecho, vamos a comentar el uso de Pinia porque todavía no estamos trabajando con un state management y vamos a desactivar. De hecho, también el router. Al final de cuentas lo único que estamos usando es la función "createApp" que nos provee Vue y nuestro componente "contador", no tenemos más. De hecho, voy a crear un nuevo archivo. Lo voy a llamar "main:ts" y vamos a guardar aquí la copia de lo que teníamos antes, de tal manera que esto quede más entendible. Por ahora nuestro archivo "main", que es nuestro archivo principal de entrada, simplemente tiene estas líneas. Estamos usando la función “createApp” que nos ofrece Vue y estamos creando un componente llamado "contador". Luego estamos montando nuestra aplicación sobre el elemento "div" que tiene como id “app”. Con esto ya podemos cerrar todo lo demás y nos vamos a enfocar solo en nuestro componente "contador". Este es el resultado de nuestro componente sin estilos. Voy a agrandar un poco esto para que se pueda ver mejor. Entonces, en esta primera lección, lo único que hemos hecho ha sido desactivar características que no usamos y definir un componente, porque sobre este componente es que vamos a estar trabajando.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript