Vuejs: Introducción y entorno

Vue 3.5 es una de las versiones más recientes del popular framework de JavaScript para la creación de interfaces de usuario. En este módulo, nos centraremos en la configuración del entorno de desarrollo utilizando Vite, una herramienta de construcción rápida que ofrece una integración excelente con Vue.

Por qué usar Vite con Vue 3.5

Vite se ha convertido en una opción popular para desarrollar aplicaciones con Vue debido a su rapidez y simplicidad. Entre sus características destacadas se encuentran:

• Inicio rápido del servidor de desarrollo: Vite utiliza un servidor de desarrollo basado en ESBuild, lo que permite tiempos de inicio casi instantáneos.
• Hot Module Replacement (HMR): Permite la actualización en tiempo real de los módulos sin necesidad de recargar toda la página.
• Optimización de la construcción: Vite divide el código en módulos más pequeños, optimizando la carga y el rendimiento.

Instalación de Vue 3.5 con Vite

Para comenzar, asegúrate de tener Node.js instalado en tu sistema. Luego, puedes crear un nuevo proyecto de Vue 3.5 con Vite utilizando el siguiente comando:

npm init vite@latest my-vue-app -- --template vue

Este comando creará un nuevo proyecto en un directorio llamado my-vue-app con la plantilla de Vue preconfigurada.

Configuración del entorno

Una vez que hayas creado tu proyecto, navega al directorio del proyecto y sigue estos pasos para configurar el entorno:

1. Instalación de dependencias:

cd my-vue-app
npm install

2. Estructura del proyecto:

   • src/: Contiene el código fuente de la aplicación.
   • public/: Archivos estáticos que se servirán tal cual.
   • vite.config.js: Archivo de configuración de Vite.

3. Inicio del servidor de desarrollo:

npm run dev

Este comando iniciará el servidor de desarrollo y podrás ver tu aplicación en http://localhost:3000.

Configuración de Vite para Vue 3.5

El archivo vite.config.js es el núcleo de la configuración de Vite. A continuación, se muestra un ejemplo básico de configuración para un proyecto de Vue 3.5:

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

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

Esta configuración básica incluye el plugin de Vue y establece el puerto del servidor de desarrollo en 3000.

Primer componente en Vue 3.5

Vamos a crear un componente simple para asegurarnos de que todo esté funcionando correctamente. En el directorio src/components, crea un archivo llamado HelloWorld.vue con el siguiente contenido:

<template>
<div>
<h1>Hola, Vue 3.5 con Vite!</h1>
</div>
</template>

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

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

Luego, importa y utiliza este componente en src/App.vue:

<template>
<div id="app">
<HelloWorld />
</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

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

Con esto, tienes un entorno básico de desarrollo configurado con Vue 3.5 y Vite. Puedes continuar agregando más componentes y funcionalidades según las necesidades de tu aplicación.