Tutorial Vuejs: Instalar y configurar Vue con Vite

Instalación de Node.js y npm

Para trabajar con Vue y Vite, es imprescindible contar con Node.js y npm (Node Package Manager) instalados en tu sistema. Node.js permite ejecutar JavaScript en el servidor, mientras que npm gestiona las dependencias de tu proyecto.

Verificación de Node.js y npm

Antes de proceder con la instalación, verifica si ya tienes Node.js y npm instalados. Abre una terminal y ejecuta los siguientes comandos:

node -v
npm -v

Si estos comandos devuelven una versión, significa que ya tienes Node.js y npm instalados. Asegúrate de que las versiones sean las recomendadas. Para Vue y Vite, se recomienda tener una versión de Node.js igual o superior a la 14.x.

Instalación de Node.js y npm

Si no tienes Node.js y npm instalados o necesitas actualizar a una versión más reciente, sigue los siguientes pasos:

Descarga Node.js: Ve a la página oficial de descargas de Node.js y descarga el instalador para tu sistema operativo. Elige la versión LTS (Long Term Support) para mayor estabilidad.

Ejecuta el instalador: Abre el archivo descargado y sigue las instrucciones del instalador. Asegúrate de marcar la opción que añade Node.js y npm a la variable de entorno PATH durante el proceso de instalación.

Verificación post-instalación: Una vez completada la instalación, abre una nueva terminal y verifica la instalación ejecutando de nuevo los comandos:

node -v
npm -v

Instalación mediante un gestor de versiones

Para mayor flexibilidad, puedes usar un gestor de versiones de Node.js como nvm (Node Version Manager). Esto te permite instalar y cambiar entre múltiples versiones de Node.js fácilmente. A continuación, se muestra cómo instalar y usar nvm:

1. Instalación de nvm: Abre una terminal y ejecuta el siguiente comando para descargar e instalar nvm:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

1. Carga nvm: Añade nvm al perfil de tu shell ejecutando los siguientes comandos:

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

1. Instalación de Node.js con nvm: Una vez instalado nvm, puedes instalar la versión recomendada de Node.js:

nvm install --lts

1. Verificación de la instalación: Verifica la instalación de Node.js y npm:

node -v
npm -v

Ejemplo para comprobar las versiones de node instaladas con el comando nvm list:

Para cambiar de una versión a otra ejecutamos el comando nvm use, por ejemplo:

Configuración de npm

npm se instala automáticamente con Node.js, pero es útil configurar algunas opciones básicas para optimizar su uso:

1. Actualización de npm: Asegúrate de tener la última versión de npm:

npm install -g npm@latest

1. Configuración del cache: Configura el cache de npm para mejorar el rendimiento:

npm config set cache /path/to/cache --global

1. Configuración de un proxy (opcional): Si estás detrás de un proxy, configura npm para usarlo:

npm config set proxy http://proxy.example.com:8080
npm config set https-proxy http://proxy.example.com:8080

Con Node.js y npm correctamente instalados y configurados, estás listo para crear y gestionar proyectos Vue con Vite.

Introducción a Vite

Vite es una herramienta de construcción de proyectos frontend que ha ganado popularidad por su rapidez y eficiencia, especialmente en el desarrollo con frameworks como Vue. A diferencia de herramientas tradicionales como Webpack, Vite utiliza una estrategia de preconstrucción de dependencias y un servidor de desarrollo basado en módulos de ES (ESM), lo que se traduce en tiempos de arranque y recarga en caliente significativamente más rápidos.

Características principales de Vite

1. Construcción ultrarrápida: Vite utiliza esbuild para la preconstrucción de dependencias, lo que permite tiempos de construcción y reconstrucción extremadamente rápidos.
2. Recarga en caliente instantánea: Gracias a la utilización de módulos de ES, Vite ofrece una experiencia de desarrollo más fluida con recargas en caliente casi instantáneas.
3. Configuración mínima: Vite viene con una configuración predeterminada optimizada para Vue, reduciendo la necesidad de configuraciones manuales extensas.
4. Soporte para TypeScript: Vite ofrece soporte integrado para TypeScript, facilitando su uso sin configuraciones adicionales.
5. Compatibilidad con plugins: Vite es extensible mediante plugins y es compatible con muchos de los plugins de Rollup, lo que permite personalizar y ampliar sus funcionalidades.

Instalación de Vite

Para empezar a trabajar con Vite en un proyecto Vue, primero necesitas instalar Vite y crear un nuevo proyecto. Asegúrate de tener Node.js y npm instalados y actualizados. Luego, puedes crear un nuevo proyecto Vue con Vite utilizando el comando npm init.

Ejecuta el siguiente comando en la terminal:

npm init vite@latest my-vue-app

Este comando crea un nuevo proyecto en una carpeta llamada my-vue-app utilizando la plantilla de Vue. Se te pedirá que elijas un nombre para el proyecto y que selecciones algunas configuraciones básicas.

Estructura del proyecto

Una vez creado el proyecto, navega a la carpeta del proyecto y ejecuta el servidor de desarrollo:

cd my-vue-app
npm install
npm run dev

El servidor de desarrollo de Vite estará ejecutándose y podrás acceder a tu aplicación Vue en http://localhost:5173 (puede variar según la configuración).

La estructura básica del proyecto generado incluye los siguientes directorios y archivos:

• index.html: El archivo HTML principal.
• src/: Contiene los archivos fuente de la aplicación.
• main.js: El punto de entrada de la aplicación Vue.
• App.vue: El componente raíz de la aplicación.
• components/: Carpeta para almacenar componentes Vue.
• vite.config.js: Archivo de configuración de Vite.

Configuración de Vite

El archivo de configuración de Vite (vite.config.js) permite personalizar el comportamiento de la herramienta. Un ejemplo básico de configuración para un proyecto Vue es el siguiente:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
  },
});

En este ejemplo, se importa el plugin de Vue y se define la configuración del servidor de desarrollo para que se ejecute en el puerto 3000. Puedes añadir más opciones según tus necesidades, como alias de rutas, configuración de proxies, entre otros.

Integración con TypeScript

Si deseas utilizar TypeScript en tu proyecto, puedes configurar Vite y Vue para soportarlo. Primero, instala las dependencias necesarias:

npm install --save-dev typescript @types/node

Luego, añade un archivo tsconfig.json en la raíz del proyecto con la siguiente configuración básica:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

Finalmente, renombra tus archivos .js a .ts y actualiza las importaciones en consecuencia. Vite manejará la compilación de TypeScript junto con Vue sin necesidad de configuraciones adicionales.

Vite proporciona una plataforma eficiente y moderna para el desarrollo de aplicaciones Vue, facilitando un flujo de trabajo más rápido y una configuración simplificada.

Creación de proyecto hola mundo en Vue con Vite

Para crear un proyecto "Hola Mundo" en Vue utilizando Vite, sigue estos pasos detallados:

Primero, asegúrate de tener Node.js y npm instalados y actualizados en tu sistema. Si no los tienes instalados, consulta la sección correspondiente sobre instalación de Node.js y npm.

Con Node.js y npm listos, puedes crear un nuevo proyecto Vue utilizando Vite. Abre una terminal y ejecuta el siguiente comando:

npm init vite@latest hola-mundo

Este comando crea un nuevo proyecto en una carpeta llamada hola-mundo utilizando la plantilla de Vue. Durante el proceso, es posible que se te soliciten algunas configuraciones básicas, como el nombre del proyecto. Puedes aceptar las opciones predeterminadas para simplificar el proceso.

Navega a la carpeta del proyecto recién creado:

cd hola-mundo

Instala las dependencias del proyecto utilizando npm:

npm install

Una vez que las dependencias estén instaladas, inicia el servidor de desarrollo ejecutando el siguiente comando:

npm run dev

El servidor de desarrollo de Vite se iniciará y podrás acceder a tu aplicación Vue en http://localhost:5173. Esta URL puede variar según tu configuración, pero Vite te proporcionará la dirección correcta en la terminal.

El proyecto generado tendrá una estructura básica que incluye los siguientes archivos y directorios:

• index.html: El archivo HTML principal del proyecto.
• src/: Carpeta que contiene los archivos fuente de la aplicación.
• main.js: Punto de entrada de la aplicación Vue.
• App.vue: Componente raíz de la aplicación.
• components/: Carpeta destinada a almacenar componentes Vue adicionales.
• vite.config.js: Archivo de configuración de Vite.

Para personalizar el proyecto, puedes editar el componente raíz App.vue ubicado en la carpeta src. A continuación, se muestra un ejemplo simple de cómo modificar App.vue para mostrar un mensaje "Hola Mundo":

<template>
  <div id="app">
    <h1>Hola Mundo</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Guarda los cambios y el servidor de desarrollo de Vite actualizará automáticamente la página para reflejar las modificaciones.

Si deseas configurar Vite con opciones adicionales, puedes modificar el archivo vite.config.js. A continuación, se muestra un ejemplo básico de configuración:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
  },
});

En este archivo, se importa el plugin de Vue y se define la configuración del servidor de desarrollo para que se ejecute en el puerto 3000. Puedes añadir más opciones según tus necesidades, como alias de rutas, configuración de proxies, entre otros.

Con estos pasos, has creado y configurado un proyecto "Hola Mundo" en Vue utilizando Vite. Esta configuración te proporciona una base sólida para desarrollar aplicaciones modernas con Vue y Vite, aprovechando la rapidez y eficiencia de esta herramienta de construcción.

Estructura de un proyecto Vue

Una vez que has creado un proyecto Vue utilizando Vite, es esencial familiarizarse con la estructura del proyecto para entender cómo se organizan los archivos y directorios. La estructura básica de un proyecto Vue generado con Vite incluye los siguientes elementos:

• index.html: Este es el archivo HTML principal del proyecto. Vite utiliza este archivo como punto de entrada para la aplicación. Aquí es donde se monta la aplicación Vue en el DOM.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue + Vite</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

src/: Este directorio contiene todos los archivos fuente de la aplicación. Es donde se encuentra la lógica principal de la aplicación, componentes, vistas y estilos.

main.js: Es el punto de entrada de la aplicación Vue. Aquí es donde se crea la instancia de Vue y se monta la aplicación en el elemento DOM definido en index.html.

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

• App.vue: Este es el componente raíz de la aplicación. Todos los demás componentes se renderizan dentro de este componente. Generalmente, contiene la estructura básica de la aplicación y el punto de partida para la navegación.

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

• components/: Este directorio es donde se almacenan los componentes Vue secundarios. Cada componente generalmente tiene un archivo .vue que contiene el template, script y estilos específicos para ese componente.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

• vite.config.js: Este archivo contiene la configuración específica para Vite. Puedes personalizar varias opciones de Vite aquí, como plugins, alias de rutas, configuración del servidor de desarrollo, entre otros.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
  },
});

• package.json: Archivo de configuración de npm que incluye las dependencias del proyecto, scripts y otra metadata. Este archivo es crucial para gestionar las dependencias y scripts de construcción del proyecto.

{
  "name": "my-vue-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "vite": "^2.6.4"
  }
}

• public/: Este directorio contiene archivos estáticos que no necesitan ser procesados por Vite. Los archivos aquí se sirven directamente en la raíz del servidor.

Esta estructura básica proporciona una organización clara y modular para el desarrollo de aplicaciones Vue. Cada parte del proyecto tiene un propósito específico, lo que facilita el mantenimiento y la escalabilidad de la aplicación.