Para comenzar a usar Vite.js vamos a ir a su documentación oficial, donde podrás encontrar los beneficios que tiene, plugins, el repositorio público, las configuraciones disponibles, entre muchos más recursos que te pueden ser útiles a la hora que quieras profundizar.

Creando un proyecto con Vite

A la hora de comenzar puedes generar diferentes proyectos con Vite a partir de una plantilla que bien puede ser de las siguientes tecnologías:

Antes de crear nuestro proyecto con Vite asegúrate de tener como mínimo instalado Node.js 14 o una versión en adelante y npm.

Comandos para generar un proyecto

Ahora bien, el comando para generar un proyecto con Vite es uno de los siguientes y dependerá del gestor de paquetes que utilices. Además, existen plantillas desarrolladas por la comunidad por si te interesa.

• Con NPM: npm create vite@latest
• Con Yarn: yarn create vite
• Con PNPM: pnpm create vite

Configuración básica

Primero tenemos que ir al editor de código de tu preferencia, en este caso emplearemos Visual Studio Code y copia en la terminal uno de los comandos antes vistos.

Una vez empleas este comando te saldrán una serie de opciones:

1. Project name: Lo primero que preguntara es cuál va a ser el nombre del proyecto. En mi caso le pondré vite-demo.
2. Select a framework: Después nos preguntará que tipo de proyecto vamos a generar (vanilla, react, vue, entre otras). En mi caso escogeré vanilla
3. Select a variant: A continuación nos pregunta que variante queremos, es decir, si lo queremos con solo JS o TS. En mi caso escogeré JS.

Iniciando nuestro proyecto

Ahora que nuestro proyecto fue creado, debemos movernos al fichero donde este se generó e instalar las dependencias con npm install. Una vez instaladas las dependencias podremos inicializar nuestro proyecto con el comando npm run dev.

Como puedes ver nuestro proyecto se inicia casi de manera inmediata y nos dice que ya podemos ver nuestra página en la URL enfrente de Local.

Reto

Ahora te reto a que vayas a los archivos que Vite género y busques el index.html, has un cambio y mira como casi inmediatamente se aplican.

Contribución creada por: Jofay Zhan Segura