Estructura del proyecto en Vue: Consumir API REST en CodeIgniter 4 - 03

Vamos a hablar sobre la estructura de carpetas que tenemos definida al momento de crear una aplicación en Vue.

Vamos a hablar sobre la estructura que tenemos aquí del proyecto no voy a ser tan teórico es un proyecto bastante práctico entonces tampoco quiero complicarme en caso de que te quedes con ganas de como qui dice más información siempre puedes buscar un poquito más de información obviamente la documentación oficial que siempre se recomienda por obvias razones de que esa siempre tiene que que ser tu fuente entonces esta carpeta no lo voay a mencionar esta es de Visual Studio code aquí se encuentran algunas configuraciones de base pero no viene el lío más que todo es para la parte de sintaxis y resaltado de errores y demás tampoco lo trabaja mucho así que no hace falta

Public

La carpeta public como siempre y toda la vida viene siendo la carpeta de acceso o que es pública aunque suene retórico en la cual serían los archivos de salida Aquí también se encuentran archivos estáticos por ejemplo el favicon y si quieres colocar algunas imágenes videos o cualquier cosa que forme parte de la aplicación en View por aquí irían voy a dar est para último el ignor no hay mucho misterio los archivos que van a ignorar ya que esto más adelante también vamos a configurarle un repositorio aunque ya lo tiene de base creo pero enot por ejemplo el Index html que por supuestísimo es el archivo de arranque aquí se encuentra lo que es fíjate que esto es una página normalita en html Vue es una tecnología de html obviamente es decir tecnología web y por lo tanto lo que entiende nuestro navegador es simplemente html css javascript y esta viene siendo la página de salida la cual podemos personalizar fíjate importante que te recuerdes que por aquí está el di con identificador de App que es el que tal cual podías ver en la documentación oficial en el ejemplo que te mostraba aquí es donde se monta nuestra aplicación es decir aquí en el source sucede todo lo que es el la estructura del framework hacemos nuestros componentes y demás y finalmente lo montamos justamente en esta página es la página de salida el pque json en el cual se encuentran las versiones que estemos empleando de nuestros paquetes en este caso estamos empleando Vue aquí lo tienes y este y en este caso Todas estas son simplemente dependencias 

Vite

Es una herramienta para el frontend que nos permite construir nuestra aplicación en otras palabras un poco lo comentado antes nuestro navegador simplemente entiende html sss javascript Pero no va a entender esta estructura que tenemos aquí por defecto la carpeta de source en la cual van a estar nuestros componentes archivos .Vue y todo lo demás entonces básicamente vite aparte de servir nuestra aplicación también permite interpretar todos estos archivos o más que interpretar y más que interpretar viene siendo el término de tras Pilar que seguramente lo has escuchado básicamente traspilar (compilar) es compilar pero cuando nosotros compilamos pasamos de un lenguaje a un lenguaje Vue Por ejemplo si tú compilasion Por más que sea html sss javascript no estás compilando como tal a otro lenguaje de programación sio viene siendo el mismo viene siendo javascript entonces por eso que se emplea el término de transpiler básicamente Vie en otras palabras o en resumen Por una parte permite montar nuestra aplicación y por otra parte permite interpretar la misma y con interpretarla me refiero a que permite convertir todo esto todo lo que nosotros vamos a generar acá algo que entienda nuestro navegador ese es el término básicamente de por lo demás aquí tiene algunas dependencias es decir byte no solamente funciona para lo que es Vue también puedes emplearlo para re angular es algo que también puedes ver por acá y cada uno de ellos tiene su paquete específico que puedes ver por ejemplo también lo puedes emplear para read entonces cada uno de ellos también tiene su paquete específico y eso viene siendo básicamente todo por aquí el rmi que es para los repositorios sobre todo

Aquí tenemos también el archivo de vite para configurarlo tampoco tenemos que toquetear mucho pero aquí por ejemplo vamos a tener lo que es bueno Esto lo vamos a ver más adelante pero es una forma como quien dice relativa de hacer las importaciones y algunas configuraciones más que pudiéramos hacer aquí por ejemplo está indicando que está ampliando el plugin de Vue que es el que estamos instalando también por acá y es simplemente configuración si quieres obtener más información de esto aquí sí te recomiendo enormemente que vayas a la documentación oficial pero eso lo que está haciendo referenciando los plugins que está instalando el principal es este y está referenciando este y este por acá y por aquí es una una forma de hacer importaciones relativas que vamos a ver más adelante cuando creemos los componentes y aquí simplemente se importan obviamente los paquetes o funciones que estamos referenciando por aquí abajo Este es otro archivo de configuración no viene mucho a caso y por lo demás aquí no hay mucho más que decir venimos aquí a la carpeta de source que es donde nosotros vamos a colocar nuestra aplicación como tal aquí también se encuentran os archivos por ejemplo los css para nuestros componentes y la de componentes que es para nuestros componentes y ya tenemos algunos antes solamente aparecía uno me parece ahora me inventaron algunas cositas más pero bueno cuando levantemos la aplicación Ahí vamos a ver qué es lo que realmente aparece Entonces cómo levantamos nuestra aplicación para ver algo por pantalla por Dios con todo lo que estoy comentando Recuerda que a la final de alguna manera tenemos que presentar esto al igual que hacemos con codiner 4 con el comando de spar serf de alguna manera.

Comandos de desarrollo

También tenemos que levantar esta aplicación para poder consumirla desde aquí cómo lo haríamos para esto aquí ya esto es algo también de node tenemos que ver justamente en este archivo tenemos que ver el apartado de Script ya por defecto nos levanta algunos vamos a ocupar son estos dos este sería para cuando ya tenemos la aplicación lista y queremos generar los archivos de salida y este hace algo equivalente otra vez equivalente a lo que hacemos con 

spark serve

Que es presentar la aplicación o levantar la aplicación en un servidor de desarrollo y este es el que tuviéramos que ampliar entonces vamos a ver qué pasa colocamos aquí npm de el manejador de paquetes de node Room que indica que vamos a ejecutar algo esto siempre lo vamos a hacer cada vez que queramos ejecutar algunos de estos comandos y colocamos aquí Def el cual es una abreviatura de lo que estemos colocando por acá ya que el comando de vite puedes colocar muchas más cosas dependiendo de tus necesidades entonces en vez de escribir todo esto aquí de manera manual simplemente aquí tenemos como quien dice el acortado y puedes crear más en caso de que sean necesarios para ti Pero como este es un curso básico no va a hacer falta que crees otros adicionales con los que tenemos ya es más que suficiente Simplemente te quería explicar un poquito el porqué de esto en resumidas cuentas para levantar nuestra aplicación en modo desarrollo colocamos aquí dev:

npm run dev

En base a lo que tenemos aquí en este escrit y veamos qué pasa nos va a indicar este bonito error por qué sucede esto porque aquí falta una carpeta muy pero muy importante que es la carpeta de los módulos de node que por alguna razón ya esto como que va cambiando un poco a veces entre versiones de View porque tengo rato que no creo realmente un un proyecto en Vue por eso que por ejemplo estos archivos no estaban solamente estaba uno llamado welcome o el de Hello World pero creo que faltan aquí estos están de más Pero en fin debe ser que cambió algo aquí ahorita que levantemos la aplicación veamos pero aquí también falta la carpeta de los módulos de node que no se encuentra definida ya esto lo vemos en el siguiente video para levantar nuestra aplicación aquí solamente te quería explicar la estructura así que vamos allá.

22-01-2025 - Andrés Cruz

In english

• Categoría
• /
• Vue
• /
• Estructura del proyecto en Vue: Consumir API REST en CodeIgniter 4 - 03