¿Cómo instalar Vite?
Clase 4 de 19 • Curso de Vite.js
Resumen
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:
- Project name: Lo primero que preguntara es cuál va a ser el nombre del proyecto. En mi caso le pondré vite-demo.
- Select a framework: Después nos preguntará que tipo de proyecto vamos a generar (
vanilla
,react
,vue
, entre otras). En mi caso escogerévanilla
- 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