Crear y configurar proyectos con Vue CLI

Curso de Vue.js: Componentes y Composition API

Contenido del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

23
Qué aprendiste en el curso de Vue.js 3
01:29 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:14

Crear y configurar proyectos con Vue CLI

Curso de Vue.js: Componentes y Composition API

Clase 2 de 23

Clase 2 / 23

Recursos

Vue CLI es la herramienta oficial de línea de comandos que te permite crear y gestionar proyectos con Vue.js como framework completo, no solo como librería. Si vienes del primer curso, aquí darás el salto a un ecosistema con archivos .vue, estructura de carpetas y servidor de desarrollo basado en Webpack.

¿Qué necesitas antes de instalar Vue CLI?

Antes de ejecutar cualquier comando, tu entorno debe estar listo. Esto ya lo configuraste en la clase de setup del primer curso, pero conviene repasarlo.

Tener instalado Node.js y saber usar NPM básico [0:20].
Conocimientos previos de desarrollo web.
Extensión del navegador para Vue y extensión para Visual Studio Code.

¿Qué es Vue CLI? Es la herramienta oficial de terminal de Vue.js que automatiza la creación, configuración y gestión de proyectos basados en este framework.

¿Cómo instalar la CLI desde la terminal?

Desde la documentación oficial de Vue.js 3, en la sección de ecosistema y CLI, encuentras el comando de instalación. Puedes usar NPM o Yarn según tu preferencia [1:05].

La instalación es global, así que queda disponible para todos tus proyectos. Una vez instalada, escribes vue en la terminal y ves todas las opciones: ver versión, ayuda y comandos como create, add o invoke [1:50].

¿Cómo crear un proyecto con vue create?

El comando vue create seguido del nombre del proyecto inicia un asistente interactivo. En el ejemplo, el proyecto se llama options [2:30].

¿Qué opciones manuales puedes activar?

Al elegir configuración manual en lugar de la default, se abre un menú donde decides qué incluir en tu proyecto. Aquí decides el ADN técnico de tu app.

Babel: te permite usar siempre la versión más reciente de ECMAScript y su sintaxis.
TypeScript: si necesitas tipado estático.
PWA: para aplicaciones web progresivas.
Router: manejo de rutas en aplicaciones de una sola página.
Vuex: librería para manejo de estado.
Preprocesadores CSS: Sass, Stylus, Less o SCSS.
Linter o formatter: Prettier, ESLint y combinaciones.
Unit testing o end to end testing.

En el ejemplo se elige Vue 3 con ESLint + Prettier, archivos de configuración separados (no dentro del package.json) y sin guardar el preset para futuros proyectos [3:30].

¿Para qué sirve Babel en un proyecto Vue? Convierte código moderno de JavaScript en una versión compatible con navegadores antiguos, asegurando que tu app funcione en todos lados.

¿Qué genera Vue CLI dentro del proyecto?

Al terminar el asistente, el CLI crea una carpeta con todo configurado: archivos de ESLint, package.json, configuración de Babel, la carpeta node_modules y la estructura base [5:30].

Dentro del package.json aparecen tres scripts listos para usar:

npm run serve: levanta un servidor en modo desarrollo usando Webpack Dev Server.
npm run build: transpila y empaqueta el proyecto para producción.
npm run lint: corrige errores de sintaxis automáticamente o los marca.

También se agrega core-js como dependencia para compatibilidad de funciones de JavaScript en navegadores, junto con la librería Vue.js y plugins clave como compiler-sfc, encargado de interpretar archivos .vue dentro del proyecto [6:30].

¿Cómo ejecutar el servidor de desarrollo?

Desde la carpeta del proyecto ejecutas npm run serve y la terminal te devuelve una IP y un puerto. Abres ese enlace en el navegador y tienes tu primer proyecto Vue.js corriendo [7:20].

La ventaja es el hot reload: cada cambio que guardas en el editor se refleja automáticamente en el navegador, sin recargar manualmente.

¿Qué hace el comando build para producción?

Con npm run build se genera una carpeta llamada dist con todo el código optimizado [8:00]. Dentro encuentras:

Un index.html minificado.
Archivos estáticos optimizados.
JavaScript minificado con Vue.js y todas las dependencias.
Imágenes y CSS empaquetados.

Esa carpeta dist puedes subirla directamente a un servidor y tu sitio funcionará como una web estática.

¿Qué es Vue UI y cuándo usarla?

El comando vue ui lanza una interfaz gráfica en tu navegador donde haces casi todo lo que harías por terminal [8:50]. Es útil cuando prefieres lo visual sobre lo textual.

Desde ahí puedes:

Crear, importar o gestionar proyectos existentes.
Agregar plugins y dependencias con un clic.
Configurar ESLint y otros ajustes de la CLI.
Ejecutar los comandos serve, build y lint.
Usar inspect para revisar la configuración real de Webpack que corre por debajo.

¿Por qué Vue CLI usa Webpack? Porque Webpack se encarga de empaquetar, optimizar y servir tu código, y la CLI lo configura por ti para que no tengas que escribir esos archivos manualmente.

El equipo detrás de Vue automatiza muy bien estas configuraciones, así que tocar Webpack directamente solo se recomienda si tienes conocimientos avanzados y necesitas algo muy específico. Para casi todo lo demás, la CLI ya cubre opciones customizadas sin que metas las manos al motor.

¿Te gustaría que el próximo curso cubra Vuex para manejo de estado? Déjalo en los comentarios.