Antes de escribir tu primera línea de código, necesitas preparar el entorno para instalar Vue.js de forma correcta. Aquí descubrirás qué herramientas configurar, cómo elegir entre CDN, npm o Vue CLI, y cómo verificar que la librería esté lista en tu navegador. Es la base que todo desarrollador frontend debe dominar antes de construir aplicaciones reactivas.

¿Qué necesitas antes de instalar Vue.js?

Antes de tocar Vue, asegúrate de tener una base sólida. Vue.js es un framework de JavaScript, así que dominar las tecnologías web previas es lo que te permitirá avanzar sin tropiezos.

• Conocimientos previos de HTML, JavaScript y desarrollo web desde los cursos básicos.
• Node.js instalado, idealmente en su versión estable más reciente (en la clase se usa la 16.13.2) [1:00].
• Visual Studio Code actualizado como editor de código.
• Si te falta algo, el curso de prework te guía en la instalación según tu sistema operativo.

¿Por qué necesito Node.js para usar Vue? Porque Vue CLI y muchas herramientas del ecosistema corren sobre Node. Sin él no puedes instalar paquetes con npm ni levantar proyectos avanzados.

¿Cómo configurar las Vue DevTools en el navegador y VS Code?

Las Vue DevTools son una extensión oficial que te deja inspeccionar componentes, estado y eventos directamente desde el navegador. Sin ellas, depurar una app Vue se vuelve un dolor de cabeza.

¿Dónde descargar la extensión correcta?

Ve al sitio oficial de Vue, entra a la sección Ecosystem y luego a Dev Tools [2:00]. Ahí encuentras la guía de instalación según tu navegador.

• En Google Chrome, haces clic en el enlace y se abre la Chrome Web Store para añadir la extensión.
• En Firefox existe una versión equivalente.
• Una vez activa, podrás inspeccionar cualquier sitio hecho con Vue.js que tenga el modo desarrollador habilitado.

¿Cómo instalar el plugin de Vue en Visual Studio Code?

Desde la documentación oficial, copia el comando que ofrece la guía y pégalo en una terminal nueva dentro de VS Code. Si tu entorno está bien configurado, npm comenzará a instalar la herramienta de línea de comandos de Vue.

Al terminar, ejecuta vue en la terminal y verás todas las opciones disponibles: -v para ver la versión, -h para la ayuda, y los comandos para crear y configurar proyectos.

¿Cuáles son las formas de instalar Vue.js en un proyecto?

Vue te da tres caminos para integrarlo en tu aplicación, y cada uno responde a un nivel de complejidad distinto [4:30].

1. CDN: importas Vue desde un servidor externo usando una etiqueta <script> en tu HTML. Ideal para empezar rápido o para proyectos pequeños.
2. npm: descargas la librería en tu repositorio local como dependencia. Útil cuando vas a usar bundlers o tener control de versiones.
3. Vue CLI: generas un proyecto completo desde la terminal, con webpack y todas las configuraciones listas para funcionalidades avanzadas.

¿Qué es un CDN en Vue.js? Es un Content Delivery Network que aloja la librería en internet. Lo importas con un <script> y tu navegador descarga Vue desde ese servidor, sin instalar nada localmente.

¿Cómo crear tu primer proyecto Vue.js con CDN?

Elige una carpeta donde guardar tus avances del curso. En la clase, el ejemplo se llama holavue (sin espacios, porque el sistema marca error si los incluyes) [6:30].

Estructura inicial del archivo HTML

Dentro de la carpeta, crea un archivo index.html con la plantilla base de HTML5 que VS Code genera automáticamente. Luego ve a la guía de instalación oficial de Vue, copia la etiqueta <script> del CDN y pégala en tu HTML.

html

<script src="https://unpkg.com/vue@next"></script>

Esa línea es todo lo que necesitas para que Vue esté disponible en tu página.

¿Cómo verificar que Vue.js está instalado correctamente?

Abre el archivo index.html en tu navegador. Visualmente verás una página en blanco, pero la magia está en las herramientas de desarrollador.

• Abre la consola de JavaScript desde el inspector del navegador.
• Verás un mensaje de Vue indicando que estás en modo desarrollo.
• Escribe window.Vue o simplemente Vue y comprobarás que el objeto existe en el entorno global.

Si el objeto responde, significa que la librería está cargada y lista para usarse.

¿Qué hago si Vue no aparece en la consola? Revisa que la etiqueta <script> apunte a una URL válida del CDN y que esté antes del cierre de </body> o dentro del <head>. Sin esa carga, el objeto Vue no existe.

Habilidades y conceptos clave que dominas con este setup

Montar el entorno no es solo seguir pasos: cada decisión te entrena en habilidades reales del desarrollo frontend moderno.

• Gestión de dependencias con npm y Node.js.
• Uso de extensiones de navegador para depurar aplicaciones SPA.
• Diferenciación entre CDN, gestores de paquetes y CLIs según el alcance del proyecto.
• Verificación de librerías mediante el objeto window y la consola de JavaScript.
• Preparación de un workspace limpio en VS Code para proyectos Vue.

Con el entorno listo y Vue respondiendo en la consola, estás a un paso de escribir tu primer Hola Mundo reactivo. ¿Qué método de instalación vas a usar para tu primer proyecto: CDN, npm o Vue CLI? Cuéntalo en los comentarios.