¿Qué es Vite?

Como que bienvenide

Como curiosidad

• Vue en frances es Vistoso
• Vite en frances es Rápido

⚡ ¿Qué es Vite?

Ideas/conceptos claves

**Bundler**

Es una herramienta para encapsular uno o más recursos HTTP en un solo archivo

Apuntes

• Es una herramienta de 3° generación para el desarrollo de frontend
• Recolecta toda la información de todas las herramientas que utilizamos hoy en día para el estándar de la industria, como ser Webpack, builder, bundlers, etc.
  • Toda esta serie de herramientas tiene una serie de ventajas, desventajas y pasos evolutivos a través de la historia, los cuales se recolecta y nos ayuda a generar una propuesta de la próxima generación de herramientas
• Vite nos brinda una Mejor experiencia de desarrollo
  • Automatización de recargar el navegador cuando hacemos cambios
  • Tener menos configuración a diferencia de otras herramientas
  • Mayor velocidad
• Vite.js se caracteriza por su velocidad, ya que el tiempo para compilar, transpilar es muy rápido
• Aparte que trae una serie de optimizaciones por debajo que nos permite tener una mejor organización de proyectos sin necesidad de realizar una serie de configuraciones

📌 **RESUMEN:** Vite es una herramienta que se caracteriza por ser bastante rápido tanto en configuración como en velocidad para realizar su tarea de transpilar o compilar. Aparte que trae una experiencia de desarrollo bastante trabajada.

Fun Fact: Se pronuncia BIT y no BAIT porque viene del francés y no del inglés

Vite es algo así como create-react-app pero mas rápido y sin menos cosas incluidas que muchas veces no utilizamos

Llevo varios mese usando vite en mis proyectos, y es fascinante lo rapito que es al momento de compilar ya que no al hacer un cambio, no compila todo el proyecto de nuevi sino que solo compila parte que cambió

weyyyyyyyyy mi mente

Ya terminé este curso y lo recomediendo 100%.
Vite te ahorrará tiempo y es super rápido y para cualquier framework y crear librerías.

Estaba utilizando Laravel + Laravel Mix para un proyecto y al migrarlo a Laravel + Vite, realmente se notó la gran diferencia en la rapidez para el entorno de desarrollo. Muestra los cambios en el navegador en tiempo real sin problema. Excelente Vite! voy a tomar el curso para conocer más de esta espectacular herramienta.

Yo ya he creado en el ámbito laboral migración de vue cli por vite a demás de otro proyecto de con vite y un framework llamado preact y la verdad es lo mejor que encontrado vs webpack.
espero aprender mucho mas de esta herramienta

Documentacion oficial de Vite: vitejs.dev

Awww la primera vez que tocaré Vite, vamo a darle!

Vamos a empezar!
Let’s go!

Vite.js es un framework de desarrollo web que se centra en la velocidad y la eficiencia. Fue creado para facilitar la construcción de aplicaciones web modernas utilizando tecnologías como JavaScript, TypeScript y Vue.js.
.
La principal característica de Vite.js es su enfoque de desarrollo rápido (hence the name “Vite”, que significa “rápido” en francés). A diferencia de otros frameworks de JavaScript, Vite.js evita el proceso de compilación tradicional y utiliza una técnica llamada “build en tiempo de ejecución” (runtime build) para ofrecer una experiencia de desarrollo más ágil.
.
Aquí tienes un ejemplo práctico de cómo puedes utilizar Vite.js para crear una aplicación web simple:
.

1. Instalación de Vite.js:
   Para comenzar, debes tener Node.js instalado en tu computadora. Luego, puedes utilizar el siguiente comando para instalar Vite.js globalmente a través de npm (Node Package Manager):

   npm install -g create-vite
   

2. Creación de un proyecto Vite.js:
   Una vez que Vite.js está instalado, puedes crear un nuevo proyecto ejecutando el siguiente comando:

   create-vite my-app
   

   Esto creará una nueva carpeta llamada “my-app” que contiene la estructura inicial de tu proyecto Vite.js.
   .

3. Iniciar el servidor de desarrollo:
   Navega a la carpeta de tu proyecto usando el comando cd my-app (si es que utilizaste “my-app” como nombre de proyecto) y luego ejecuta el siguiente comando para iniciar el servidor de desarrollo:

   npm run dev
   

   Esto iniciará un servidor local que compilará y servirá tu aplicación en tiempo real.
   .

4. Creación de un componente:
   En la carpeta de tu proyecto, encontrarás una carpeta llamada “src” que contiene el archivo “App.vue”. Este archivo es el componente principal de tu aplicación. Puedes abrirlo y modificarlo según tus necesidades.
   .
   Por ejemplo, puedes agregar un título y un mensaje en el componente “App.vue” de la siguiente manera:

   <template>
     <div>
       <h1>Bienvenido a mi aplicación Vite.js</h1>
       <p>¡Hola desde Vite.js!</p>
     </div>
   </template>
   
   <script>
   export default {
     name: 'App',
   }
   </script>
   

5. Ejecución de la aplicación:
   Después de guardar tus cambios en el archivo “App.vue”, podrás ver los resultados en tiempo real en tu navegador. Abre tu navegador web y visita la dirección h ttp://local host:3000 para ver tu aplicación Vite.js en funcionamiento.

.
Eso es solo un ejemplo básico para ayudarte a empezar con Vite.js. A medida que explores más la documentación y las características de Vite.js, descubrirás que ofrece muchas más funcionalidades para el desarrollo de aplicaciones web avanzadas y eficientes.

Me recomendaron mucho este curso y aquí estoy, ¡tiene muy buena pinta! 🦾

Vite (palabra en francés para “rápido”, pronunciado como /vit/ , como “veet”) es una herramienta de compilación que tiene como objetivo proporcionar una experiencia de desarrollo más rápida y ágil para proyectos web modernos.

me encanta su vibra! aqui vamos con este curso!

Yo lo miré en el Nuevo Curso de Programación, vamos a por este también. Let’s go!

Y lo mejor es que usa esbuild “echo en GO / GoLand” por detrás, por eso es super rápido.

Saludos, vine por sugerencia de @LeoCode.
Me menciono que con Vite me va a solucionar la vida :3
o lo suficiente para no sufrir con los preprocesadores.