Crear un proyecto Vue con Vite

1. Requisitos previos

Antes de crear el proyecto, asegúrate de tener instalado:

• Node.js: entorno que permite ejecutar herramientas de JavaScript.
• npm: gestor de paquetes que viene incluido con Node.js.

Para comprobar si están instalados, abre una terminal y ejecuta:

node -v
npm -v

Si ambos comandos muestran una versión, puedes continuar.

2. Crear el proyecto

Abre una terminal en la carpeta donde quieras guardar el proyecto y ejecuta:

npm create vue@latest

Este comando inicia el asistente de creación de proyectos de Vue.

El asistente solicitará el nombre del proyecto y permitirá seleccionar funcionalidades adicionales, como TypeScript, Vue Router, Pinia, pruebas y herramientas de calidad de código.

¿Qué opciones elegir?

Para un proyecto sencillo con el que quieras empezar a practicar:

• Project name: el nombre de tu proyecto.
• TypeScript: No, si quieres trabajar con JavaScript.
• JSX Support: No, salvo que lo necesites.
• Vue Router: No, si todavía no necesitas varias páginas.
• Pinia: No, si no necesitas gestionar un estado compartido.
• Testing y herramientas adicionales: puedes dejarlas desactivadas inicialmente.

Las opciones disponibles pueden variar según la versión del asistente.

3. Entrar al proyecto e instalar dependencias

Una vez creado el proyecto, ejecuta los comandos que indique el asistente. Habitualmente serán:

cd nombre-del-proyecto
npm install

• cd nombre-del-proyecto: entra en la carpeta del proyecto.
• npm install: instala las dependencias definidas en package.json.

4. Ejecutar el servidor de desarrollo

Para iniciar el proyecto localmente:

npm run dev

La terminal mostrará una dirección local, normalmente similar a http://localhost:5173/.

Abre esa dirección en el navegador para visualizar la aplicación.

Mientras el servidor esté activo, los cambios que guardes en los archivos suelen reflejarse automáticamente en el navegador.

Para detener el servidor, pulsa Ctrl + C en la terminal.

5. Estructura básica del proyecto

Una estructura típica de Vue con Vite es:

nombre-del-proyecto/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── index.html
├── package.json
└── vite.config.js

• src/: contiene el código principal de la aplicación.
• src/components/: componentes reutilizables de Vue.
• App.vue: componente raíz de la aplicación.
• main.js: punto de entrada que inicializa Vue.
• public/: archivos estáticos que se sirven sin procesarlos como módulos.
• package.json: dependencias y comandos disponibles.
• vite.config.js: configuración de Vite.

Los nombres y archivos pueden variar dependiendo de las opciones seleccionadas.

6. Comandos habituales

Comando	Función
npm run dev	Inicia el servidor de desarrollo.
npm run build	Compila la aplicación para producción.
npm run preview	Permite previsualizar localmente la compilación de producción.
npm install	Instala las dependencias del proyecto.
npm install nombre-paquete	Instala un paquete adicional.
npm uninstall nombre-paquete	Desinstala un paquete.

Para comprobar que el proyecto puede compilarse correctamente:

npm run build

La compilación normalmente genera los archivos finales en la carpeta dist/.

7. Errores comunes

El comando npm no se reconoce

Node.js puede no estar instalado o no estar disponible en el PATH del sistema. Instala Node.js desde su sitio oficial y reinicia la terminal.

No se encuentra package.json

Probablemente estás ejecutando el comando fuera de la carpeta del proyecto.

Comprueba la ubicación actual y entra en la carpeta correcta:

cd nombre-del-proyecto

El puerto ya está ocupado

Vite normalmente ofrece otro puerto disponible. Revisa la dirección que aparece en la terminal y utiliza esa dirección.

La aplicación no inicia después de descargar el proyecto

En la carpeta del proyecto, ejecuta:

npm install
npm run dev

8. Flujo de trabajo resumido

Para crear un proyecto nuevo desde cero:

npm create vue@latest
cd nombre-del-proyecto
npm install
npm run dev

Para trabajar posteriormente en el proyecto:

cd nombre-del-proyecto
npm run dev

Y cuando quieras verificar la compilación:

npm run build

Nota: Vue es el framework que utilizas para construir la interfaz, mientras que Vite proporciona las herramientas para ejecutar el entorno de desarrollo y compilar la aplicación.