🚀 create-vue-stack

Una herramienta CLI interactiva para generar un nuevo proyecto de Vue.js con un stack de desarrollo moderno y preconfigurado.

Este script te preguntará el nombre de tu proyecto y luego instalará y configurará automáticamente la base de tu aplicación, incluyendo todas las herramientas de desarrollo.

⚡ Uso

El script está publicado en npm, por lo que puedes ejecutarlo desde cualquier terminal (en cualquier PC que tenga Node.js) sin necesidad de instalar nada.

# El comando "npm create" añade el "create-" por ti.
npm create vue-stack

El script te guiará. Solo necesitas escribir el nombre de tu proyecto, y la herramienta hará el resto.

📦 ¿Qué incluye este Stack?

Este generador está diseñado para ser la base de un proyecto profesional y robusto. Al usarlo, tu proyecto quedará configurado con:

• Vue.js 3: El framework progresivo.

• Vite: El build tool de frontend nativo.

• TypeScript: Para un código tipado y escalable.

• Vue Router: Para el manejo de rutas (SPA).

• Pinia: Para el manejo de estado global.

• ESLint: Para el linting y la prevención de errores.

• Prettier: Para el formateo de código automático.

🛠️ ¿Cómo funciona?

Este proyecto es un script de Node.js que usa @clack/prompts para la interfaz de terminal. El script principal (crear-proyecto.mjs) realiza las siguientes tareas automatizadas:

1. Pregunta el nombre del proyecto de forma interactiva.

2. Ejecuta npm create vue@latest con todos los flags predefinidos.

3. Entra en la carpeta del proyecto y ejecuta npm install para instalar las dependencias.

4. Corre npm run format para limpiar el código inicial.

5. Abre VS Code en la nueva carpeta del proyecto.

6. Abre una nueva ventana de terminal y ejecuta npm run dev por ti.

#!/usr/bin/env node
import * as p from "@clack/prompts";
import { execSync, spawn } from "child_process";
import color from "picocolors";
import path from "path";

async function main() {
  console.clear();
  p.intro(color.inverse(" 🚀 Asistente para crear tu Stack de Vue 🚀 "));

  const name = await p.text({
    message: "¿Cómo se llamará tu proyecto?",
    placeholder: "mi-proyecto-vue",
    validate(value) {
      if (value.length === 0) return "¡El nombre es obligatorio!";
      return value.includes(" ") ? "No uses espacios en el nombre." : undefined;
    },
  });

  if (p.isCancel(name)) {
    p.cancel("Operación cancelada.");
    return;
  }

  const flags = ["--ts", "--router", "--pinia", "--eslint", "--prettier"].join(
    " "
  );

  const s = p.spinner();
  const projectPath = path.resolve(name);

  try {
    s.start(`1. Creando el proyecto "${name}"...`);
    const command = `npm create vue@latest ${name} -- ${flags}`;
    execSync(command, { stdio: "inherit" });
    s.stop(`✅ Proyecto "${name}" creado.`);

    s.start("2. Instalando dependencias (npm install)...");
    execSync("npm install", { cwd: name, stdio: "inherit" });
    s.stop("✅ Dependencias instaladas.");

    s.start("3. Formateando código (npm run format)...");
    execSync("npm run format", { cwd: name, stdio: "inherit" });
    s.stop("✅ Código formateado.");

    s.start("4. Abriendo VS Code...");
    execSync("code .", { cwd: name });
    s.stop("✅ Editor abierto.");

    s.start("5. Iniciando servidor (npm run dev)...");

    if (process.platform === "win32") {
      const child = spawn(
        "cmd.exe",
        [
          "/c",
          "start",
          '""',
          "/D",
          projectPath,
          "cmd.exe",
          "/K",
          "npm run dev",
        ],
        {
          detached: true,
          stdio: "ignore",
        }
      );

      child.unref();
    } else if (process.platform === "darwin") {
      const macScript = `osascript -e 'tell app "Terminal" to do script "cd \\"${projectPath}\\" && npm run dev"'`;
      execSync(macScript);
    } else {
      const linuxScript = `gnome-terminal --working-directory="${projectPath}" -- /bin/sh -c "npm run dev; exec bash"`;
      execSync(linuxScript);
    }

    s.stop("✅ Servidor iniciado en una nueva ventana.");

    p.outro(
      color.green(
        `¡Todo listo! Tu proyecto está abierto y el servidor está corriendo.`
      )
    );
  } catch (e) {
    s.stop("❌ Error durante el proceso.");
    console.error(e.message);
    p.outro(color.red("Hubo un error. Revisa el log de la terminal arriba."));
  }
}

main();