TypeScript / Vue – estructura de componente

Bienvenidos sean a este post, hoy veremos el primer vistazo a los componentes.

En el post anterior vimos como se crea un proyecto y las configuraciones necesarias. En ese post vimos como es nuestra aplicacion base. Hoy haremos algunas modificaciones y para ello crearemos un nuevo proyecto mediante el siguiente comando:

$ vue create ejemplo02

Esto nos abrira las opciones para configurarlas, en el caso mio es el siguiente:

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
❯ tinchicus ([Vue 3] typescript)
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

En este caso voy a cargar las configuraciones que utilice en el post anterior y las almacene en ese perfil, las opciones que almacena son:

1. typescript (solamente)
2. 3.x
3. Use class-style component syntax? yes
4. Use babel alongside? no
5. dedicated config files
6. Save this as a preset for future projects? yes

Estas opciones les aparecen si en la primera ventana seleccionan Manually select features, por cada ventana que aparezca elijan los valores pasado en la lista. La ultima opcion es la que usaremos para crear el perfil que usaremos en nuestros proximos proyectos. Con nuestra aplicacion creada, podemos continuar con este post. En nuestro nuevo directorio tendremos tres directorios principales:

• node_modules, donde iran todos los modulos de node.js que necesitamos para nuestro proyecto
• public, es donde esta la pagina que veremos y ahi agregaremos los elementos de la misma.
• src, es el directorio donde estan los codigos de typescript.

Por lo general nos centraremos mas en src, porque estaran todos los archivos con codigo de typecript, pero no quita que necesitemos acceder a public para agregar otros elementos como pueden ser imagenes. Si vamos a src tenemos el archivo main.ts que contendra el siguiente codigo:

src/main.ts

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

La primera importacion sera el componente encargado de crear nuestra aplicacion, la siguiente va a ser la aplicacion en si y estara contenida en App.vue. Mediante el primer componente importado utilizaremos al segundo para «cargar» nuestra aplicacion en si y mediante mount buscara el elemento que pasamos como argumento y cargara el contenido ahi. Pero nosotros trabajaremos principalmente en App.vue y por esta razon modificaremos el codigo existente de la siguiente manera:

src/App.vue

<template>
  Hola Vue!
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
export default class App extends Vue {}
</script>

<style scoped>
</style>

Esto sera una pagina muy basica para saber diferenciar cada uno de los tres partes principales que componen una aplicacion de vue. La primera es template y contendra todo el codigo html que mostraremos en pantalla. En este caso solo renderizara ese mensaje cuando lo invoquemos. El siguiente segmento sera la parte de script, en este caso en lugar de usar javascript le pasamos ts (typescript) y dentro todo el codigo que manejara nuestra pagina. El ultimo segmento sera para los estilos que se apliquen a los elementos del template. En este caso le agregamos la opcion scoped para que solo aplique a esta aplicacion, si lo quitamos se aplicara a toda la pagina. Si ejecutan a la aplicacion mediante npm run serve, se vera de la siguiente manera

Como pueden ver se muestra lo que comentamos anteriormente, este post fue simplemente para describir cuales son las partes basicas y que controlan de nuestra aplicacion. En los proximos posts iremos viendo otros temas relacionados a la aplicacion.

En resumen, hoy hemos visto la estructura del componente principal encargado de nuestra aplicacion, sus directorios y una breve descripcion de cada uno, asi como tambien los archivos base de nuestra aplicacion y por ultimo hemos visto las tres partes principales que manejan la aplicacion en si. Espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.