Entendiendo proyecto base

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.

Crea una cuenta y continúa aprendiendo 🚀

Entendiendo proyecto base