Cómo instalar Vite

Curso de Vite.js

Introducción

¿Qué es Vite?

Historia del Ecosistema de JavaScript

Características de Vite

Setup inicial

¿Cómo instalar Vite?

Boilerplate de Vite

Estilos CSS

Importar CSS

Pre-procesadores CSS

CSS Modules

Archivos estáticos

Importar imágenes

Importar JSON

Importación global

Configuración

Uso con TypeScript

Vite Config

Construir para producción

Variables de entorno y modos

Sitios multi-página

Construir librerías

Frameworks

Soporte para React

Soporte para Vue

Cierre del curso

Despedida

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

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

Aportes 11

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Seba Cardoso

hace 2 años

Puedes usar Vite sin instalar aqui: vite.new

Maycol Rodriguez

hace 2 años

Si ya tienen abierto VsCode, y no quieren volver a abrir otra ventana de VsCode, deben ejecutar el siguiente comando estando en la carpeta del proyecto.

code . -r

Con esto se abrira el proyecto en la ventana de VsCode que se encuentra activo.

Mitchell Contreras

hace 2 años

Comandos

/ Recomendación de versiones

$ node -v

v16.13.2

$ npm -v

8.1.2

//Comandos para instalar

$ npm create vite@lastest

? Project name:

? Select a framework: [’vanilla’, ‘vue’, ‘react’, ‘preact’, ‘lit’, ‘svelte’]

? Select a variant: [’vanilla’, ‘vanilla-ts’]

//Comandos para ejecutar

Moverse al directorio generador con el ‘Project name’
Ejecutar $ npm i
Ejecutar $ nom run dev
El proyecto corre en el puerto 3000 →

//Comandos para ejecutar

1. Moverse al directorio generador con el ‘Project name’
2. Ejecutar $ npm i
3. Ejecutar $ nom run dev
4. El proyecto corre en el puerto 3000

Andre Huaman Yovera

hace un año

El término "vanilla JS" se utiliza para referirse a JavaScript puro, es decir, JavaScript sin el uso de bibliotecas o frameworks adicionales. La palabra "vainilla" en este contexto se utiliza para denotar algo que es básico, estándar y sin adiciones o modificaciones. . Existen muchas bibliotecas y frameworks populares en el ecosistema de JavaScript, como jQuery, React, Angular y Vue.js, que proporcionan una serie de funcionalidades y abstracciones para facilitar el desarrollo web. Sin embargo, JavaScript puro, o "vanilla JS", se refiere a la implementación y uso directo del lenguaje JavaScript sin depender de ninguna biblioteca externa. . El término "vanilla JS" se ha vuelto más común para distinguir entre el uso de JavaScript puro y el uso de bibliotecas o frameworks adicionales. Al referirse a "vanilla JS", se enfatiza que el código está escrito sin ninguna capa de abstracción adicional y que se está utilizando la funcionalidad y la sintaxis nativa del lenguaje. . El uso de "vanilla JS" puede ser beneficioso en ciertos casos, ya que puede ser más liviano en términos de tamaño de archivo y rendimiento, ya que no hay necesidad de cargar y ejecutar bibliotecas adicionales. También puede ayudar a los desarrolladores a comprender mejor el lenguaje JavaScript subyacente y a tener un mayor control y flexibilidad sobre su código. . En resumen, el término "vanilla JS" se utiliza para describir JavaScript puro sin dependencias externas, y se utiliza para distinguirlo de los frameworks y bibliotecas adicionales en el desarrollo web.