Vue Academy · Lección

Instalación de Vue CLI

Instale y utilice Vue CLI para crear nuevos proyectos

Lección 1 de 313 pasos

Instalación de Vue CLI es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.

¿Qué es Vue CLI?

Vue CLI es la herramienta clásica de línea de comandos para crear y administrar proyectos de Vue.

Crea proyectos con valores predeterminados adecuados
Administra la configuración de compilación mediante plugins
Está basada en webpack

Fue el estándar durante años, aunque actualmente Vue recomienda Vite.

Instalación global de Vue CLI

Instale la CLI globalmente para que el comando vue esté disponible en cualquier ubicación.

# Install globally with npm
npm install -g @vue/cli

# Verify the installation
vue --version
# @vue/cli 5.0.8

Creación de un proyecto

Use vue create para generar la estructura de un proyecto nuevo. Debe proporcionar un nombre para el proyecto.

# Create a new project
vue create my-project

# The CLI launches an interactive prompt

Elección de preajustes

La CLI le pide que elija un preajuste:

Predeterminado incluye Babel y ESLint, y es la opción más rápida
Seleccionar funciones manualmente le permite añadir Router, Vuex, TypeScript, pruebas y mucho más

Puede guardar los preajustes y reutilizarlos en proyectos futuros.

Selección manual de funciones

Cuando elige la selección manual, activa o desactiva las funciones que desea.

# Example feature checklist
? Check the features needed for your project:
  (*) Babel
  ( ) TypeScript
  (*) Router
  (*) Vuex
  (*) CSS Pre-processors
  (*) Linter / Formatter

Ejecución del proyecto

Después de crear el proyecto, la CLI muestra los comandos para iniciar la aplicación.

# Move into the project
cd my-project

# Start the dev server
npm run serve

# App runs at http://localhost:8080

Aparece Vite

Vite es la herramienta de compilación moderna creada por el equipo de Vue.

Usa módulos ES nativos para iniciar al instante
Reemplazo de módulos en caliente extremadamente rápido
Es mucho más rápido que Vue CLI, basada en webpack

Actualmente, Vite es la herramienta recomendada para los proyectos nuevos de Vue.

Vite frente a Vue CLI

Comparación entre las dos herramientas:

Vue CLI usa webpack, tarda más en el inicio en frío y es madura y configurable
Vite usa esbuild y ESM nativo, inicia casi al instante y será la opción predeterminada en adelante

Vue CLI se encuentra actualmente en modo de mantenimiento. Prefiera Vite, a menos que mantenga un proyecto antiguo.

npm create vue@latest

La forma oficial de iniciar un proyecto nuevo de Vue basado en Vite es usar la herramienta create-vue.

# Scaffold a Vite + Vue project
npm create vue@latest

# Prompts for name and features:
#   TypeScript, JSX, Vue Router, Pinia,
#   Vitest, ESLint, Prettier

Ejecución de un proyecto de create-vue

create-vue usa los scripts estándar de Vite.

# After scaffolding
cd my-vue-app
npm install
npm run dev

# Dev server: http://localhost:5173

¿Cuál debería usar?

Orientación para elegir:

¿Está comenzando un proyecto desde cero en 2024 o después? Use npm create vue@latest (Vite)
¿Mantiene un proyecto antiguo creado con Vue CLI? Siga utilizándolo
¿Desea la experiencia de desarrollo más rápida? Vite es la mejor opción

Comprobación rápida

Compruebe cuánto entiende sobre las opciones de herramientas de Vue.

Responde en la lección interactiva

Resumen: instalación de Vue CLI

Ha aprendido sobre las herramientas para generar la estructura de proyectos de Vue:

Vue CLI se instala con npm install -g @vue/cli
vue create genera la estructura usando preajustes
Vite es la alternativa moderna y rápida
npm create vue@latest es la forma moderna recomendada de comenzar

A continuación: explorará la estructura del proyecto generado.

Gratis para empezar

Aprende HTML con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos: 42
Lecciones: 156

Empezar a aprender gratis Ver el curso completo

Preguntas frecuentes

¿La lección «Instalación de Vue CLI» es gratis?

Sí — el texto completo de «Instalación de Vue CLI» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Instalación de Vue CLI»?

Instale y utilice Vue CLI para crear nuevos proyectos Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 3.

¿Cuánto tiempo toma la lección «Instalación de Vue CLI»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Vue Academy