Emprende la creación de una app en Vue con confianza: desde abrir la terminal hasta ver un Hello World funcional en tu navegador. Aquí entenderás qué genera el CLI, cómo se organiza el proyecto con webpack y cómo correrlo con npm scripts, sin perder tiempo en configuraciones innecesarias.
¿Cómo generar la aplicación con CLI y definir el entorno?
Para iniciar, se abre una terminal, como iTerm en macOS o la nativa del sistema. Con cd en macOS/Linux o dir en Windows, te ubicas en la carpeta donde crearás la app. El comando del CLIvue init recibe dos parámetros: el nombre del template, en este caso webpack simple, y el nombre de la app, por ejemplo Platzi Music. Luego aparecen preguntas básicas: nombre, descripción, autor y si deseas usar Sass como preprocesador de CSS.
¿Qué comandos usar en la terminal?
Posicionarte en la carpeta del proyecto con cd.
Generar la app con vue init y el template webpack simple.
Listar contenido con ls para confirmar la carpeta creada.
Instalar dependencias con npm install o npm i.
Abrir el editor, por ejemplo Atom, desde la terminal con atom.
# instalación de dependencias npm install# entorno de desarrollo npm run dev# construcción para producción npm run build
¿Qué opciones iniciales del generador elegir?
Nombre y descripción del proyecto.
Autor, que puede tomarse de GitHub.
Uso de Sass para optimizar el trabajo con CSS.
¿Qué estructura y archivos crea el proyecto con webpack simple?
El CLI genera una base completa y funcional. Cada archivo cumple un rol clave para desarrollo y producción con webpack como module bundler.
¿Para qué sirven babel rc, git ignore e index.html?
Babel RC: configuración de Babel, el transpiler de código.
.gitignore: define qué no versionar en Git.
index.html: único HTML de la app, punto de entrada y referencia de librerías.
¿Qué contiene package.json y por qué asegura reproducibilidad?
Metadata del proyecto: nombre, descripción y autor.
Dependencias exactas para reproducir el entorno con npm install.
Scripts para automatizar tareas con npm run.
Permite que la app funcione igual en desarrollo, prueba y producción.
¿Qué hace webpack.config.js como module bundler?
Configura webpack para empaquetar múltiples archivos y componentes en pocos bundles.
Facilita modularizar y evita código espagueti.
Prepara un código de desarrollo legible y genera un output optimizado para el navegador.
Además, en la carpeta source está el código principal:
main js: instancia la app con Vue, hace import de librerías y del componente principal app punto view, usando sintaxis de ES6 modules.
app punto view: componente raíz con HTML, JavaScript y estilos (CSS o SCSS) en un único archivo.
assets: contenido estático como imágenes, SVG, audio o video.
¿Cómo correr, ver y personalizar el Hello World en Vue?
Con dependencias instaladas, los npm scripts habilitan desarrollo y build sin instalar módulos globales adicionales. La app arranca en localhost y muestra el Hello World generado por el CLI.
¿Cómo ejecutar npm scripts dev y build?
npm run dev: corre la app en local para trabajar.
npm run build: construye el bundle para producción.
Excepciones conocidas: npm start y npm test pueden ejecutarse sin npm run si existieran, aunque aquí no se usan.
La consola muestra que la app corre en el puerto 8080 del localhost.
¿Cómo editar app punto view para el hello world?
Abrir el archivo app punto view, el componente principal.
Eliminar la sección <style> si no se necesita, incluso si está en SCSS.
Limpiar el template y conservar el div con id="app", clave porque la instancia de Vue se monta allí desde main js.
Agregar un <h1> con una expresión que muestre msg.
En <script>, en data(), cambiar el valor de la propiedad msg.
Guardar para que webpack recompille y el navegador se refresque automáticamente.
Ideas clave que aplicarás de inmediato:
Generación con CLI: vue init con template webpack simple y nombre del proyecto.
Gestión de dependencias con npm: npm install garantiza entornos reproducibles.
Ejecución local con webpack: npm run dev levanta el servidor en 8080.
Empaquetado para producción: npm run build crea bundles óptimos.
Modularización con ES6 modules: import para dividir el código y evitar espagueti.
Edición del componente raíz: app punto view con HTML, JS y estilos en un solo archivo.
¿Tienes dudas sobre algún paso, comando o archivo del setup? Cuéntalo en los comentarios y comparte qué editor y flujo de trabajo estás usando.
