Primeros pasos con Vue 3 y CodeIgniter 4

Daremos una Introducción a Vue 3.

Antes de comenzar a desarrollar nuestra aplicación en Vue que va a consumir la Restapi que tenemos por aquí implementada en CodeIgniter 4 quería hablar un poco sobre la tecnología que vamos a emplear que como te comentaba antes era la de Vue puedes emplear Vue puedes emplear r puedes emplear angular puedes emplear cualquier otra si ya dominas una de ellas si no quieres aprender Vue perfectamente puedes realizar esa capa de integración Ya que en resumen lo que vamos hacer son peticiones mediante axios que ya lo explicaré un poco más adelante y construir ciertos componentes ciertos bloques de html para el listado algunos botones para el resto de las acciones para eliminar y demás pero en esencia viene siendo eso yo uso 

Vue para crear webs SPA

Vue porque como comenté al inicio viene siendo una tecnología muy sencilla es una tecnología web por lo tanto pega completamente con frameworks como lo son coding nider aunque sea una tecnología web del cliente aún así viene siendo una tecnología web y es una tecnología sencilla de entender si la comparamos con otras y por más que sea ya de esta forma también aprendemos una tecnología como en este caso viene siendo Vue entonces Vue obviamente también tiene ciertas ventajas con respecto a por ejemplo read o angular como te comentaba esto por cierto es un fragmento de mi libro tal cual puedes ver que tiene un coste aparte y yo lo empleo al igual que el libro de CodeIgniter que lo tengo por acá para presentar ciertos aspectos teóricos o ciertos desarrollos que vayamos a realizar entonces básicamente la ventaja que nos da Vue o frameworks similares como read o angular es el hecho de que no tenemos que cambiar el doom de manera automática es decir con el DOM me refiero a la página web cuando cambiamos un estado cuando cambiamos un estatus por ejemplo un usuario pasa de no autenticado a autenticado usualmente colocamos algunas opciones más en el menú quitamos el botón de login ninguna de esas acciones las tenemos que hacer de manera manual y más que esto también podemos construir una we de tipo spa lo que significa que mediante datos datos que llamamos reactivos que están atados de una forma a la interfaz como vamos a ver más adelante cuando cambiamos estos datos de manera programática es decir mediante el Script automáticamente se realizan estos cambios o se ven reflejados en la pantalla y eso es básicamente un web de tipo spa de igual manera aquí puedes pausar la clase y leer un poquito lo que estoy comentando por aquí y obviamente como te comentaba al inicio otros frameworks como React angular pueden hacer lo mismo pero en este caso es mucho más sencillo de entender mucho más ligero y mucho más amigable al momento de comenzar con una tecnología como la mencionada y a partir de aquí tenemos muchas opciones por ejemplo el uso de prop que nos permite modularizar componentes la palabra componente también es algo que vas a escuchar bastante ya que vio está basada en componentes y los componentes no son más que pequeñas piezas de código que hacen una funcionalidad en específico por ejemplo puede ser un botón luego este botón lo podemos aprovechar para para que hag ciertas acciones como eliminar puede ser directamente un modal puede ser directamente una tabla o un listado pueden ser muchas cosas ya iremos creando algunos pocos a medida que avancemos pero quédate con eso simplemente 

Un componente es una pequeña pieza de código que puede ser reutilizada fácilmente puede ser tipo genérico como te comentaba como directamente un botón y luego implementamos la acción dependiendo de lo que necesitemos 

Tambien un componente puede ser algo un poco más específico por ejemplo listados de películas que luego nosotros podemos colocar en cualquier parte de la aplicación así de simple 

Props, Observadores y más

También tenemos muchas características en Vue que otra vez iremos presentando poco a poco como el uso de observadores o washes que también nos permiten observar cambios sobre datos reactivos en este caso es enfocado desde el Script es decir no desde la el html ya esto también le explico un poco más adelante Cómo está formado un componente en Vue pero lo de una we tcpa era lo que te comentaba que era el doom el doom html que otra vez es toda la página cuando cambiamos un dato reactivo es decir una variable en javascript automáticamente se cambia del html esto en este caso este observador que colocamos por acá viene siendo del lado del escripto Puede que no me sigas mucho no importa si todavía no me entiendes muy bien el concepto Recuerda que también Puedes ver este video un poco más adelante pero Quédate simplemente con la idea de que es un framework un framework del lado del cliente de javascript que nos permite crear web de tipo sps es decir web que de manera sencilla prácticamente automática podemos cambiar el estado de múltiples elementos html todo depende como lo implementos a medida que vayamos cambiando determinados valores de unas variables un conjunto de variables que también vamos a ver cómo vamos a definir así que pues nada es básicamente eso De igual manera puedes aquí pausar y leer en caso de que sigas teniendo algunas dudas 

Nuevamente no es necesario tener ningún conocimiento en Vue vamos a ir viendo todo desde cero pero en caso de que quieras profundizar más recuerda que yo también cuento aquí con en este caso solamente cuento con un libro asociado a la tecnología y por YouTube también cuento con varios videos una lista de reproducción para comenzar a desarrollar en Vue Entonces ya también para entrar un poquito en contexto para emplear Vue básicamente tenemos dos formas Node y CDN

https://vuejs.org/

Script, HTML y CSS bases del componente

Un componente consta de tres elementos el html que usualmente está Sí o sí que es una pequeña pieza de html como te comentaba antes en este caso viene siendo un botón incremental tenemos la parte del Script que en este caso no se visualiza porque es una estructura muy sencilla es esa es un poquito opcional y también la parte del estilo que es bastante opcional ya que usualmente se agarra estilo del de una hoja madre aunque también lo puedes colocar directamente en el componente y esta viene siendo el arranque de la aplicación es decir siempre tenemos en este caso una parte raíz de la aplicación en la cual arrancamos Vue:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

Al ejemplo anterior, cuando le demos un clickm vemos que automáticamente se va a ver reflejado en el HTML.

Node y NPM

Recordemos que node tenemos dos elementos muy importantes lo que es no que es como tal el entorno de ejecución de javascript que viene siendo node y el npm son de las siglas de node package manager es decir manejador el manejador de paquetes de node con el cual nosotros podemos instalar paquetes como en este caso viene siendo Vue 

Si no te aparece nada te aparece como Comando no encontrado:

zsh: command not found:

O algo por el estilo intenta reiniciar tu equipo por si las moscas aquí te aparece por ejemplo esto justamente el de comando no encontrado intenta reiniciar tu equipo y eso sería prácticamente todo y siempre pendiente cuando estés instalando de si te aparece algún chat en el cual indique de que si quieres agregarlo al pack Sistema o algo por el estilo márcalo obviamente para que puedas luego utilizarlo desde la terminal otra vez si en la terminal o cuando perdón cuando estás instalando te aparece como en el caso de python te aparece un check que indique que si quieres agregar no al pack de sistema que no sé si lo pregunta márcalo ahí porque va a ser necesario porque si no no lo vas a poder utilizar de esta forma y vas a tener que reinstalarlo.

18-01-2025 - Andrés Cruz

In english

• Categoría
• /
• Vue
• /
• Primeros pasos con Vue 3 y CodeIgniter 4