Creando Tu Primera Aplicación Vue

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta lección, aprenderás a crear tu primera aplicación Vue desde cero. Cubriremos los siguientes pasos:

Instalación de Vue CLI
Creación de un nuevo proyecto Vue
Estructura del proyecto
Ejecutar la aplicación
Explicación del código inicial

Instalación de Vue CLI

Vue CLI (Command Line Interface) es una herramienta oficial para la creación de proyectos Vue.js. Facilita la configuración y el desarrollo de aplicaciones Vue.

Paso 1: Instalar Node.js y npm

Antes de instalar Vue CLI, asegúrate de tener Node.js y npm (Node Package Manager) instalados en tu sistema. Puedes descargarlos desde nodejs.org.

Paso 2: Instalar Vue CLI

Abre tu terminal y ejecuta el siguiente comando para instalar Vue CLI globalmente:

npm install -g @vue/cli

Para verificar que Vue CLI se ha instalado correctamente, puedes ejecutar:

vue --version

Creación de un Nuevo Proyecto Vue

Paso 1: Crear el Proyecto

En tu terminal, navega al directorio donde deseas crear tu proyecto y ejecuta:

vue create my-first-vue-app

Paso 2: Seleccionar Preset

Vue CLI te pedirá que selecciones un preset. Para esta lección, selecciona la opción "Default (Vue 3)" usando las teclas de flecha y presiona Enter.

? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default (Vue 2) ([Vue 2] babel, eslint)
  Manually select features

Estructura del Proyecto

Una vez que el proyecto se ha creado, navega al directorio del proyecto:

cd my-first-vue-app

La estructura del proyecto debería verse así:

my-first-vue-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── yarn.lock

Descripción de Archivos y Directorios

public/: Contiene el archivo index.html que es la plantilla principal de la aplicación.
src/: Contiene el código fuente de la aplicación.
- assets/: Directorio para almacenar recursos estáticos como imágenes.
- components/: Directorio para almacenar componentes Vue.
- App.vue: Componente raíz de la aplicación.
- main.js: Punto de entrada de la aplicación.
package.json: Archivo de configuración del proyecto que incluye dependencias y scripts.

Ejecutar la Aplicación

Para ejecutar la aplicación, usa el siguiente comando en tu terminal:

npm run serve

Esto iniciará un servidor de desarrollo y deberías ver una salida similar a esta:

App running at:
- Local:   http://localhost:8080/
- Network: http://192.168.1.100:8080/

Abre tu navegador y navega a http://localhost:8080/. Deberías ver la página de bienvenida de Vue.

Explicación del Código Inicial

main.js

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

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

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

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </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;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>