Carpeta de los módulos de node - Vue 3 + Rest Api + CodeIgniter 4 - 04
Vamos a instalar la carpeta de los módulos de nose solamente si no te aparece la carpeta.
Nos quedamos acá en la cual el proyecto no lo podemos levantar así que vamos a ver porque como te digo falta una carpeta de los módulos de node que sería la equivalente que tenemos en CodeIgniter o proyectos en php la carpeta de vendor en la cual se encuentran todas las dependencias del proyecto es lo equivalente pero en este caso desde Node por alguna razón no lo generó como te digo Esto va cambiando parece que entre de de Vue que hay como tres formas de instalarlo yo por ejemplo siempre lo empleo es Laravel pero tenía rato que no lo crea así de manera individual y individual lo tenemos como te comentaba antes podemos crear un proyecto desde cero inicializando un proyecto en node podemos crearlo tal cual hicimos y también podemos emplear la CLI que es otra opción que nos da más acceso para personalizar varias cosas entonces
Comando de instalación de Node
Hay como cuatro formas de crear proyectos en vue por aquí vamos a ejecutar:
npm install Que es un comando que parece que faltó acá porque no generó la carpeta de los módulos de node y esperamos un momento a que termine el proceso esto se va a tardar un rato
Punto importante no te asustes con el tamaño de la carpeta ya que esa carpeta cuando pasemos a producción no la vamos a emplear esto solamente es para propósito de desarrollo
La carpeta de node modules vas a encontrar muchos paquetes intermedios que nos que van a permitir que nosotros podamos desarrollar en View como tal Pero no te preocupes porque esa carpeta va a tener muchísimos archivos y no la vamos a ampliar cuando pasemos a por producción que Recuerda que es ejecutando este comando y cuando ejecutemos este comando generaría aquí en la carpeta los archivos de salida que tuvos que copiar y pegar
Muchos archivos y carpetas en node_modules
Fíjate la cantidad de paquetes que se agregaron ya que no solamente son estos tres al igual que ocurre con coding o php en general cada uno de estos paquetes tienen dependencias y fíjate que por aquí debería de aparecer otro archivo muy importante que es el de
package-lock.json
package-lock.json en el cual se encuentran las versiones específicas que se estén empleando que antes no estaba y es por eso que antes generó el la salida tan rápido ya que como te indico las dependencias tienen dependencias y bueno no va a entrar mucho lío pero es lo que se encuentra acá con las versiones específicas ya que fíjate que por aquí se encuentran las versiones como quien dice generales este que esto tampoco lo hablé pero es decir esta iones que están aquí no son específicas como son estas ya que fíjate que este sombrerito indica instale vite en su versión 6.0.5:
"vite": "^6.0.5"Comando de dev
En el archivo de:
package.json
"dev": "vite",Podras ver los comandos para desarrollar y producción
También aparte de levantar el servidor Fíjate que esta oportunidad s funcionó también va generar aquí un watch y con watch me refiero a un observador entiéndase que cada vez que hacemos un cambio nuestra aplicación en Vue automáticamente va a recargar o debería recargar cada vez que hagas un cambio en el código fuente.
Archivo de arranque de Vue
Este es el archivo de arranque
main.js
const app = createApp(App)
app.config.globalProperties.$axios = axios
window.axios = axios
app.mount('#app')Fíjate que aquí estamos importando Vue desde Vue la función llamada create que es una importación con nombre es decir que si aquí le cambias el nombre de a fallar porque esto no lo va a encontrar o no debería encontrarla tal cual puedes ver aquí
F12 en tu navegador para ver los errores
También te recomiendo que le des un f12 Para que veas los errores aquí en el cliente y aquí te indica clarito de que esto no ha sido encontrado esto es porque es una importación con nombre ya esto también lo veremos un poco más adelante pero es por las llaves estamos importando:
import { createApp } from 'vue'Componente padre/raiz
main.js
app.mount('#app')Como quien dice componente principal componente padre así lo vamos a llamar familiarízate con este término de componente padre que viene siendo el llamado app que es el componente de salida y aquí lo tenemos que viene siendo este y lo estamos montando lo estamos montando en un div en un elemento html llamado a que justamente que teníamos aquí en la página por acá si aquí la cambiaras el nombre:
index.html
<div id="app"></div>Si cambias el DIV, Vue no encontrará donde montar la app y no funcionará.
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter