Crear una aplicación Vue con CLI y webpack

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 CLI vue 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.