Vue CLI es la herramienta oficial de línea de comandos para la rápida inicialización de proyectos Vue.js. Facilita la confiugración inicial y permite comenzar a desarrollar de manera eficiente.

Instalación de Node.js

Antes de instalar Vue CLI, es fundamental tener Node.js y su gestor de paquetes NPM (Node Package Manager) instalados. Puedes verificar la instalación ejecutando los siguientes comandos en tu terminal:

node -v
npm -v

Si ambos comandos muestran los números de versión, la instalación es correcta.

Insatlación de Vue CLI

Una vez configurado el entorno de Node.js, puedes instalar Vue CLI globalmente usando NPM:

npm install -g @vue/cli

La opción -g asegura que Vue CLI esté disponible en cualquier directorio de tu sistema. Si experimentas lentitud en la descarga, considera usar un registro (registry) de NPM espejo en tu región, como el de Taobao en China, usando cnpm (previamente instalado con npm install -g cnpm):

cnpm install -g @vue/cli

En caso de que la instalación falle, es recomendable limpiar la caché de NPM antes de reintentar:

npm cache clean --force

Tras la instalación, verifica la versión de Vue CLI:

vue --version

Para explorar las opciones disponibles y los comandos de Vue CLI, puedes usar:

vue --help

Generación de un Proyecto con Webpack

Vue CLI ofrece varios "plantillas" (templates) para iniciar proyectos. Estas plantillas definen la estructura inicial y las dependencias. Los tipos comunes incluyen plantillas basadas en Webpack o Browserify, y cada una puede venir en una versión "simple" (solo lo esencial para desarrollo) o "completa" (incluyendo linter, tests, etc.).

Para este ejemplo, ganeraremos un proyecto utilizando la plantilla oficial de Webpack en su configuración simple. Navega hasta el directorio donde deseas crear tu proyecto y ejecuta:

vue init webpack nombre-de-tu-proyecto

• init: Comando para inicializar un nuevo proyecto.
• webpack: Especifica la plantilla a utilizar (en este caso, la plantilla oficial de Webpack).
• nombre-de-tu-proyecto: El nombre que le darás a tu nueva aplicación. Evita nombres reservados como 'vue', 'node', etc.

El comando te guiará a través de una serie de preguntas para configurar tu proyecto, como el nombre del proyecto, descripción, autor, configuración de Vue Router, y más.

Configuración y Ejecución del Proyecto

Una vez que el asistente de vue init ha completado la generación de archivos, navega al directorio del proyecto recién creado:

cd nombre-de-tu-proyecto

A continuación, instala todas las dependencias necesarias:

npm install

Finalmente, para iniciar el servidor de desarrollo y ver tu aplicación en el navegador, ejecuta:

npm run dev

Si todo ha ido correctamente, deberías ver tu primera aplicación Vue.js funcionando en el navegador, usualmente en http://localhost:8080.