Cómo crear tu primer Hola Mundo con Vue.js (guía paso a paso)

Posted on by adminmiti
Hola mundo vue

Crear tu primera aplicación con Vue.js es el mejor punto de partida para entender cómo funcionan los frameworks modernos de JavaScript. En esta guía aprenderás paso a paso cómo crear un Hola Mundo con Vue 3, desde la instalación hasta la ejecución local.

Vue.js es uno de los frameworks más populares para desarrollar interfaces interactivas, y destaca por su simplicidad, reactividad y curva de aprendizaje suave.

⚙️ Requisitos previos

  • ✅ Node.js versión 18 o superior (descargar)
  • ✅ npm o yarn (viene incluido con Node)
  • ✅ Editor como VS Code
node -v
npm -v

🚀 Paso 1: Crear el proyecto con Vite

Vite es la herramienta más rápida para iniciar proyectos con Vue 3. En tu terminal, ejecuta:

npm create vue@latest hola-mundo-vue

O con Yarn:

yarn create vue hola-mundo-vue

Después:

cd hola-mundo-vue
npm install

🧠 Paso 2: Ejecutar el servidor local

npm run dev

Aparecerá algo como:
Local: http://localhost:5173/

💻 Paso 3: Editar el componente principal

Abre el archivo src/App.vue y reemplaza con:

<template>
  <div id="app">
    <h1>👋 ¡Hola Mundo desde Vue 3!</h1>
    <p>Tu primera aplicación está funcionando correctamente.</p>
  </div>
</template>

<script setup>
console.log('Vue.js está funcionando 🎉')
</script>

<style scoped>
#app {
  text-align: center;
  margin-top: 50px;
  font-family: 'Inter', sans-serif;
}
h1 {
  color: #42b883;
}
</style>

🧩 Paso 4: Comprender la estructura del proyecto

  • App.vue: componente raíz
  • main.js: punto de entrada de Vue
  • index.html: plantilla principal

Cada componente combina HTML, CSS y JavaScript en un solo archivo.

🌐 Paso 5: Generar build de producción

npm run build

Esto creará la carpeta dist/ con los archivos listos para publicar.

📈 Conclusión

¡Felicidades 🎉! Acabas de crear tu primera aplicación con Vue.js 3 mostrando un “Hola Mundo”. Desde aquí puedes continuar aprendiendo sobre componentes, props, rutas y más.

🔗 Recursos recomendados

¿Te gustó este artículo? 💬 Compártelo en redes y suscríbete a nuestro blog para más tutoriales sobre Vue.js y desarrollo web moderno.

Related Posts