Skip to content

Unidad 6: Introducción a Vue.js

Objetivo: Configurar y comprender la estructura de un proyecto Vue.js, incluyendo la creación de componentes de un solo archivo, y ejecutar la aplicación localmente.

6.1 ¿Qué es Vue.js y por qué utilizarlo?

Vue.js es un framework progresivo de JavaScript utilizado para construir interfaces de usuario interactivas y aplicaciones de una sola página (SPA). Su enfoque principal es la capa de vista, lo que facilita la integración con otras bibliotecas o proyectos existentes. Vue.js es valorado por su simplicidad, flexibilidad y rendimiento eficiente.
Requisitos Previos Los componentes de Vue están escritos como una combinación de objetos JavaScript que administran los datos de la aplicación y una sintaxis de plantilla basada en HTML que se asigna a la estructura DOM subyacente. Para la instalación y para usar algunas de las características más avanzadas de Vue (como componentes de archivo único o funciones de renderizado), necesitará un terminal con node + npm instalado.
Objtivo Para configurar un entorno de desarrollo Vue local, cree una aplicación de inicio y comprenda los conceptos básicos de cómo funciona.

Vue es un Framework moderno de JavaScript que proporciona instalaciones útiles para la mejora progresiva; a diferencia de muchos otros Frameworks, puede usar Vue para mejorar el HTML existente. Esto le permite usar Vue como reemplazo directo para una biblioteca como jQuery.

Dicho esto, también puede usar Vue para escribir aplicaciones de una sola página (SPA) completas. Esto le permite crear un marcado administrado completamente por Vue, lo que puede mejorar la experiencia y el rendimiento del desarrollador cuando se trata de aplicaciones complejas. También le permite aprovechar las bibliotecas para el enrutamiento del lado del cliente y la gestión del estado cuando lo necesite. Además, Vue adopta un enfoque "intermedio" para las herramientas como el enrutamiento del lado del cliente y la gestión del estado. Si bien el equipo principal de Vue mantiene bibliotecas sugeridas para estas funciones, no se incluyen directamente en Vue. Esto le permite seleccionar una biblioteca de gestión de enrutamiento/estado diferente si se ajustan mejor a su aplicación.

Además de permitirle integrar progresivamente Vue en sus aplicaciones, Vue también proporciona un enfoque progresivo para escribir el marcado. Como la mayoría de los Frameworks, Vue le permite crear bloques reutilizables de marcado a través de componentes. La mayoría de las veces, los componentes de Vue se escriben utilizando una sintaxis especial de plantilla HTML. Cuando necesite más control del que permite la sintaxis HTML, puede escribir JSX o funciones JavaScript simples para definir sus componentes.

6.2 Instalación de Vue CLI y creación de un nuevo proyecto

Podemos utilizar Vue.js para crear aplicaciones web interactivas y dinámicas, lo podemos añadir en nuestra página web utilizando elelemtos script o podemos crear un proyecto completo con Vue CLI.

En los script de la página web, podemos añadir Vue.js con el siguiente código:

Tenemos dos versiones, una para desarrollo donde no están deshabilitadas las advertencias y otra para producción donde las advertencias están deshabilitadas.

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Y otra para optimizada para producción con avisos mínimos en la consola.:

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

Pero para para crear proyectos complejos se recomienda utilizar Vue CLI. Para instalar Vue CLI y crear un nuevo proyecto, sigue los siguientes pasos.

Para comenzar con Vue.js, utilizaremos la Vue Command Line Interface (CLI), que simplifica la creación y gestión de proyectos Vue.

Para crear aplicaciones más complejas, deberá utilizar el paquete npm de Vue. Esto le permitirá utilizar funciones avanzadas de Vue y herramientas como Vite o webpack. Para facilitar la creación de aplicaciones con Vue, existe una herramienta de andamiaje CLI, create-vue, que agiliza el proceso de desarrollo. Para utilizar create-vue, necesitará: tener instalado Node.js y npm en su sistema.

  1. Instalar Vue CLI:

Para instalar Vue e inicializar un nuevo proyecto, ejecute el siguiente comando en su terminal:

Asegúrate de tener Node.js y npm instalados. Luego, en la terminal, ejecuta:

npm create vue@latest
Este comando le dará una lista de configuraciones de proyectos que puede usar. Hay algunos valores predeterminados, pero puede elegir su propia configuración específica del proyecto. Estas opciones le permiten configurar cosas como TypeScript, linting, vue-router, pruebas y más. Pasaremos por las opciones en los pasos de inicialización a continuación.

  1. Navegar al directorio del proyecto y ejecutar la aplicación:
cd nombre-del-proyecto
npm run serve

La aplicación estará disponible en http://localhost:8080/.

Creación de un proyecto Hello world

Para crear un proyecto de Vue.js, ejecute el siguiente comando en la terminal, antes situate con cden la carpeta donde quieras crear el proyecto:

npm create vue@latest

Este comando nos pedirá que seleccionemos una configuración de proyecto. Para este ejemplo, seleccione como nombre hello-world y las opciones Default (eslint, prettier). Recuerda instalar las dependencias necesarias.

cd hello-world
npm install
nom run format

Una vez creado el proyecto tendremos una carpeta con el nombre que le hemos dado al proyecto y dentro una estructura de archivos y carpetas.

Luego, navegue al directorio del proyecto y ejecute la aplicación:

cd hello-world
npm run serve

La aplicación estará disponible en http://localhost:8080/.

6.3 Estructura de carpetas y archivos en un proyecto Vue.js

Al crear un proyecto con Vue CLI, se genera una estructura de archivos organizada para facilitar el desarrollo. A continuación, se detallan las principales carpetas y archivos:

nombre-del-proyecto/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
└── README.md
  • node_modules/: Contiene todas las dependencias y módulos de npm necesarios para el proyecto.
  • public/: Incluye archivos estáticos que se sirven directamente, como index.html y favicon.ico.
  • src/: Directorio principal del código fuente de la aplicación.
  • assets/: Almacena recursos como imágenes y archivos de estilo.
  • components/: Carpeta para los componentes Vue reutilizables.
  • App.vue: Componente raíz de la aplicación.
  • main.js: Punto de entrada de la aplicación donde se inicializa Vue y se monta la aplicación en el DOM.
  • package.json: Archivo de configuración que lista las dependencias, scripts y metadata del proyecto.

6.4 Componentes de un solo archivo (.vue)

En Vue.js, los Componentes de Un Solo Archivo (Single File Components o SFC) permiten definir la estructura, lógica y estilos de un componente en un único archivo con extensión .vue. Esto mejora la modularidad y mantenibilidad del código.

Un archivo .vue típico se compone de tres secciones principales:

  1. <template>: Define la estructura HTML del componente.
  2. <script>: Contiene la lógica y funcionalidad del componente en JavaScript.
  3. <style>: Incluye los estilos CSS específicos para el componente.

Ejemplo de un componente HelloWorld.vue:

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

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

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

6.5 Detalle del archivo App.vue

El archivo App.vue actúa como el componente raíz de la aplicación. Es el punto de partida donde se ensamblan y renderizan otros componentes.

Estructura típica de App.vue:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Bienvenido a tu aplicación Vue.js"/>
  </div>
</template>

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

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

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

6.6 Inicialización y montaje de la aplicación con main.js

El archivo main.js es el punto de entrada de la aplicación. Aquí se crea la instancia de Vue y se monta en un elemento del DOM.

Contenido típico de main.js:

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

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

Explicación: - import { createApp } from 'vue';: Importa la función createApp de Vue para crear una nueva instancia de la aplicación. - import App from './App.vue';: Importa el componente raíz. - createApp(App).mount('#app');: Crea la aplicación Vue y la monta en el elemento con el id #app en index.html.

Esto permite que toda la aplicación Vue se renderice dentro de ese elemento.

6.7 Aplicación a To-Do List

Objetivo: Crear el proyecto To-Do List con Vue.js, inicializarlo en main.js y mostrar una lista estática de tareas.

1️⃣ Crear el Proyecto To-Do List

Ejecutar los siguientes comandos en la terminal (si queremos utilizar bootstrap en el proyecto):

vue create to-do-list
cd to-do-list
npm install 
npm install bootstrap
npm run dev

Esto creará el proyecto y lo iniciará en http://localhost:8080/.

2️⃣ Configuración en main.js

Código de main.js

1
2
3
4
5
import { createApp } from 'vue';
import App from './App.vue';
import 'bootstrap/dist/css/bootstrap.min.css';

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

Explicación: - import { createApp } from 'vue'; → Crea la aplicación Vue. - import App from './App.vue'; → Importa el componente raíz. - import 'bootstrap/dist/css/bootstrap.min.css'; → Agrega Bootstrap para mejorar la apariencia. - createApp(App).mount('#app'); → Montea la aplicación en #app en index.html.

3️⃣ Implementación del Componente ToDoList.vue

Ahora vamos a crear un nuevo proyecto Vue llamado to-do-list y a implementar el componente ToDoList.vue.

Código de src/components/ToDoList.vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<template>
  <div class="container mt-4">
    <h2 class="text-center">Lista de Tareas</h2>
    <ul class="list-group">
      <li class="list-group-item">Aprender Vue.js</li>
      <li class="list-group-item">Practicar con un proyecto</li>
      <li class="list-group-item">Construir una aplicación</li>
    </ul>
  </div>
</template>

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

Código actualizado de App.vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<template>
  <div id="app">
    <h1 class="text-center mt-4">Aplicación To-Do con Vue.js</h1>
    <ToDoList />
  </div>
</template>

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

export default {
  components: {
    ToDoList
  }
};
</script>

6.8 Proyecto Blog: Lo que deben hacer los alumnos

📌 Objetivo: Crear la estructura inicial del Blog con Vue.js y Bootstrap.

✅ Pasos a seguir:
1️⃣ Crear un nuevo proyecto Vue llamado mi-blog-vue.
2️⃣ Configurar Bootstrap en main.js.
3️⃣ Crear un componente BlogList.vue.
4️⃣ Añadir BlogList.vue a App.vue y mostrar una lista estática de entradas.

🔒 Solución del Blog (oculta inicialmente)

📌 Código de BlogList.vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<template>
  <div class="container mt-4">
    <h2 class="text-center">Lista de Entradas</h2>
    <ul class="list-group">
      <li class="list-group-item">Primer post del blog</li>
      <li class="list-group-item">Introducción a Vue.js</li>
      <li class="list-group-item">Cómo organizar un proyecto Vue</li>
    </ul>
  </div>
</template>

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

Código actualizado de App.vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<template>
  <div id="app">
    <h1 class="text-center mt-4">Blog con Vue.js</h1>
    <BlogList />
  </div>
</template>

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

export default {
  components: {
    BlogList
  }
};
</script>

Siguiente paso: Introducir v-model, v-for y v-bind para hacer los proyectos dinámicos.