Descifrando la CLI de Vue

La idea detrás de una CLI (Interfaz de Línea de Comandos) es usar comandos simples y editables para producir un mejor resultado. La CLI de Vue no es diferente. Cuando comienza un nuevo proyecto, lo último de lo que un desarrollador debería preocuparse es del andamiaje del proyecto. Afortunadamente, el equipo de Vue ha agrupado el andamiaje, la creación de prototipos y una variedad de otros comandos útiles en una herramienta CLI fácil de usar.

Instalación

Sinpmohiloes su administrador de paquetes preferido, el proceso de instalación de Vue CLI es tan simple como puede ser.

#npm option$ npm install -g @vue/cli#yarn option$ yarn global add  @vue/cli

Confirme que esto se haya instalado correctamente abriendo una nueva terminal y usando elvistadominio.

La CLI se instala globalmente para poder usarse en múltiples proyectos.

Prototipado

La creación instantánea de prototipos es una de las características principales de Vue CLI, que permite a los desarrolladores escribir rápidamente un.vistao.jsarchivar y obtener una vista previa de su trabajo sin necesidad de configurar otras herramientas de compilación comopaquete webyBabel.

Para utilizar esta función, primero debe instalar un complemento adicional.

# npm option$ npm install -g @vue/cli-service-global# yarn option$ yarn global add @vue/cli-service-global

Una vez completado, puede escribir el archivo del componente, navegar a su directorio y ejecutarlo vue serve {YOUR_FILE_NAME}para obtener una vista previa instantánea.

Banderas adicionales que puedes pasar vue serveincluyen:

• -o -abiertoAbre su navegador predeterminado al puerto del servidor de desarrollo.
• -do -CopiarCopia la URL del servidor de desarrollo a tu portapapeles.
• -pag -puertotoma un solo argumentopuertoPara especificar el puerto del servidor de desarrollo, el valor predeterminado es8080

Andamio

Uno de los principales beneficios de Vue CLI es que maneja la configuración y el andamiaje del proyecto por usted, eliminando la necesidad de preocuparse por la estructura de carpetas.

Al ejecutar lo siguiente se iniciará el proceso de configuración de un nuevo proyecto:

$ vue create my-new-project

A continuación, se le mostrarán una serie de indicaciones que le permitirán elegir las funciones que prefiera para este proyecto. Estas funciones incluyen:

• Babel
• Mecanografiado
• Soporte para PWA
• Enrutador Vue
• Vuex
• Preprocesadores CSS
• Linter/formateador
• Pruebas unitarias
• Pruebas de extremo a extremo

A continuación se presentan algunas preguntas más sobre preferencias (dependiendo de lo que haya elegido previamente):

• Sintaxis de componentes de estilo de clase
• Utilice Babel con TypeScript
• Modo de historial del enrutador
• SASS, LESS o Stylus
• Configuración de ESLint
• Solución de prueba unitaria E2E
• Archivos de configuración dedicados o enpackage.json
• Gestor de paquetes preferido

Después de todo esto, también puedes optar por guardar estas configuraciones como predeterminadas, lo que te permitirá omitir estas preguntas en proyectos futuros.

¿Prefieres una interfaz de usuario a una interfaz de línea de comandos? Ejecutar vue uipara iniciar un proceso de interfaz gráfica de usuario.

Complementos

Si bien el proceso de creación de estructuras se encargará automáticamente de la mayoría de los complementos, es posible que a mitad de un proyecto desee agregar otro. Con vue add, puede inyectar fácilmente un nuevo complemento en un proyecto existente.

¿No encuentras lo que necesitas? ¡Prueba a explorar esta lista de complementos disponibles!

Referencia de configuración

Además de las configuraciones mencionadas anteriormente, la CLI también proporciona un archivo de configuración opcional, vue.config.js. Este archivo se puede utilizar para ajustar las opciones dentro de la CLI, así como también las configuraciones internas del paquete web.

Este archivo debe estar en el nivel superior de su proyecto, junto a package.json

Algunas de las opciones de configuración más importantes:

• rutaPública: La URL en la que se implementará finalmente tu aplicación. El valor predeterminado es '/', por lo que si tu dominio es my-domain.com, se implementará en my-domain.com/. Esto es útil si tu aplicación no es el dominio de nivel superior, sino una subruta.
• directorio de salida: El directorio en el que se generarán los archivos de compilación. De manera predeterminada, este esdist
• activosDir: Dónde se encuentran sus activos estáticos. Esto es relativo a la outputDircarpeta
• páginas:Las aplicaciones Vue no tienen por qué ser *SPA* (aplicaciones de página única). Este modo generará páginas para cada punto de entrada especificado. Debe ser un objeto que contenga cada página, cada una con un entry. También puede proporcionar template, filename, title, chunkopciones, pero no son obligatorias.

He aquí un ejemplo sencillo de cómo vue.config.jspuede verse un archivo:

module.exports = {  outputDir: 'public',  // ...more options}

Puede encontrar una referencia de todas las opciones disponibles aquí.

Hay una gran variedad de opciones adicionales que se pueden pasar a esta opción de configuración. ¡No dude en consultar la Documentación oficial para obtener más información!