Comenzando
¡Bienvenido al tutorial de Vue!
El objetivo de este tutorial es darte rápidamente una experiencia de lo que se siente al trabajar con Vue, justo en el navegador. No pretende ser exhaustivo, y no es necesario que lo entiendas todo antes de seguir adelante. No obstante, después de completarlo, asegúrate de leer también la Guía que cubre cada tema con más detalle.
Prerrequisitos
Este tutorial supone una familiaridad básica con HTML, CSS y JavaScript. Si eres totalmente nuevo en el desarrollo front-end, puede que no sea la mejor idea saltar directamente a un framework como primer paso; ¡comprende lo básico y luego vuelve! La experiencia previa con otros frameworks ayuda, pero no es necesaria.
Cómo Usar este Tutorial
Puedes editar el código a la derechadebajo y ver el resultado actualizado al instante. Con cada paso se introducirá una característica principal de Vue, y se espera que completes el código para que la demo funcione. En caso de que te quedes atascado, tendrás un botón "¡Muéstrame!" que te revelará el código que funciona. Procura no depender demasiado de él: aprenderás más rápido resolviendo las cosas por tu cuenta.
Si eres un desarrollador experimentado que viene de Vue 2 u otros frameworks, hay algunos ajustes que puedes hacer para aprovechar al máximo este tutorial. En cambio, si eres un principiante, se recomienda ir con los valores predeterminados.
Detalles de la Configuración del Tutorial
-
Vue ofrece dos estilos de API: Options API and Composition API. Este tutorial está diseñado para funcionar con ambos; puedes elegir tu estilo preferido usando los interruptores de Preferencia de API en la parte superior. Aprende más sobre los estilos de la API.
-
También puede cambiar entre el modo SFC o el modo HTML. En el primero se mostrarán ejemplos de código en formato Componentes de un Solo Archivo (SFC), que es el que la mayoría de los desarrolladores utilizan cuando usan Vue con un paso de compilación. El modo HTML muestra el uso sin un paso de construcción.
TIP
Si vas a usar el modo HTML sin un paso de compilación en tus propias aplicaciones, asegúrate de cambiar las importaciones a:
import { ... } from 'vue/dist/vue.esm-bundler.js'dentro de tus scripts o configura tu herramienta de compilación para resolver vue en consecuencia. Ejemplo de configuración para Vite:
// vite.config.js
export default {
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js'
}
}
}Consulta la sección correspondiente en la guía de herramientas para más información.
¿Listo? Haz clic en "Siguiente" para empezar.