La CLI de Vue.js: aprenda a usarla

Vue es un proyecto muy impresionante y, además del núcleo del marco, mantiene muchas utilidades que facilitan la vida de un programador de Vue. Uno de ellos es Vue CLI.


Vue es un proyecto muy impresionante y, además del núcleo del marco, mantiene muchas utilidades que facilitan la vida de un programador de Vue.

Uno de ellos es Vue CLI.

CLI son las siglas de Command Line Interface.

Nota: Hay una gran reelaboración de la CLI en este momento, pasando de la versión 2 a la 3. Si bien aún no es estable, describiré la versión 3 porque es una gran mejora con respecto a la versión 2 y bastante diferente.

Instalación

La CLI de Vue es una utilidad de línea de comandos y la instala globalmente usando npm:

npm install -g @vue/cli

o usando hilo:

yarn global add @vue/cli

Una vez que lo haga, puede invocar elvuemando.

¿Qué proporciona la CLI de Vue?

La CLI es esencial para el desarrollo rápido de Vue.js.

Su objetivo principal es asegurarse de que todas las herramientas que necesita funcionen para realizar lo que necesita, y abstrae todos los detalles de configuración esenciales que el uso de cada herramienta de forma aislada requeriría.

Puede realizar una configuración inicial del proyecto y un andamio.

Es una herramienta flexible: una vez que crea un proyecto con la CLI, puede ir y ajustar la configuración, sin tener queexpulsarsu aplicación (como lo haría concreate-react-app).

Cuando expulsa de la aplicación create-react-app, puede actualizar y modificar lo que desee, pero no puede confiar en las fantásticas funciones que ofrece la aplicación create-react-app.

Puede configurar cualquier cosa y aún así poder actualizar con facilidad.

Después de crear y configurar la aplicación, actúa como una herramienta de dependencia en tiempo de ejecución, construida sobre el paquete web.

El primer encuentro con la CLI es al crear un nuevo proyecto de Vue.

Cómo usar la CLI para crear un nuevo proyecto de Vue

Lo primero que va a hacer con la CLI es crear una aplicación Vue:

vue create example

Lo bueno es que es un proceso interactivo. Debes elegir un ajuste preestablecido. De forma predeterminada, hay un ajuste preestablecido que proporciona integración con Babel y ESLint:

Voy a presionar la flecha hacia abajo ⬇️ y elegir manualmente las funciones que quiero:

Prensaspacepara habilitar una de las cosas que necesita y luego presioneenterpara continuar. Como elegí un linter / formateador, Vue CLI me solicita la configuración. Elegí ESLint + Prettier porque esa es mi configuración favorita:

Lo siguiente es elegir cómo aplicar las pelusas. yo elijopelusa en guardar.

A continuación: pruebas. Elegí las pruebas y Vue CLI me ofrece elegir entre las dos soluciones más populares: Mocha + Chai vs Jest.

Vue CLI me pregunta dónde poner toda la configuración: si en elpackage.jsonarchivo, o en archivos de configuración dedicados, uno para cada herramienta. Elegí este último.

A continuación, Vue CLI me pregunta si quiero guardar estos ajustes preestablecidos y permitirme elegirlos como una opción la próxima vez que use Vue CLI para crear una nueva aplicación. Es una característica muy conveniente, ya que tener una configuración rápida con todas mis preferencias es un alivio de la complejidad:

Vue CLI luego me pregunta si prefiero usar Yarn o npm:

y es lo último que me pregunta, y luego descarga las dependencias y crea la aplicación Vue:

Cómo iniciar la aplicación Vue CLI recién creada

Vue CLI ha creado la aplicación para nosotros, y podemos ir alexamplecarpeta y ejecutaryarn servepara iniciar nuestra primera aplicación en modo de desarrollo:

La fuente de la aplicación de ejemplo de inicio contiene algunos archivos, incluidospackage.json:

Aquí es donde se definen todos los comandos de la CLI, incluidosyarn serve, que usamos hace un minuto. Los otros comandos son

  • yarn build, para iniciar una compilación de producción
  • yarn lint, para ejecutar el linter
  • yarn test:unit, para ejecutar las pruebas unitarias

Describiré la aplicación de muestra generada por Vue CLI en un tutorial separado.

Repositorio de Git

Observe lamasterpalabra en la esquina inferior izquierda de VS Code? Eso es porque Vue CLI crea automáticamente un repositorio y realiza la primera confirmación, por lo que podemos saltar directamente, cambiar cosas y sabemos lo que cambiamos:

Esto está muy bien. ¿Cuántas veces te sumerges y cambias las cosas, solo para darte cuenta cuando quieres comprometer el resultado, que no cometiste el estado inicial?

Usar un ajuste preestablecido de la línea de comando

Puede omitir el panel interactivo e indicarle a Vue CLI que use un ajuste preestablecido en particular:

vue create -p favourite example-2

Dónde se almacenan los ajustes preestablecidos

Los preajustes se almacenan en el.vuejsarchivo en su directorio personal. Aquí está el mío después de crear el primer ajuste preestablecido "favorito"

{
  "useTaobaoRegistry": false,
  "packageManager": "yarn",
  "presets": {
    "favourite": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "prettier",
          "lintOn": [
            "save"
          ]
        },
        "@vue/cli-plugin-unit-jest": {}
      },
      "router": true,
      "vuex": true
    }
  }
}

Complementos

Como puede ver al leer la configuración, un preset es básicamente una colección de complementos, con alguna configuración opcional.

Una vez que se crea un proyecto, puede agregar más complementos usandovue add:

vue add @vue/cli-plugin-babel

Todos esos complementos se utilizan en la última versión disponible. Puede forzar a Vue CLI a usar una versión específica pasando la propiedad de la versión:

"@vue/cli-plugin-eslint": {
  "version": "^3.0.0"
}

esto es útil si una nueva versión tiene un cambio importante o un error, y necesita esperar un poco antes de usarla.

Almacenar presets de forma remota

Un ajuste preestablecido se puede almacenar en GitHub (o en otros servicios) creando un repositorio que contenga unpreset.jsonarchivo, que contiene una única configuración preestablecida. Extraído de lo anterior, hice una muestra preestablecida enhttps://github.com/flaviocopes/vue-cli-preset/blob/master/preset.jsonque contiene esta configuración:

{
  "useConfigFiles": true,
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "prettier",
      "lintOn": [
        "save"
      ]
    },
    "@vue/cli-plugin-unit-jest": {}
  },
  "router": true,
  "vuex": true
}

Se puede usar para arrancar una nueva aplicación usando:

vue create --preset flaviocopes/vue-cli-preset example3

Otro uso de Vue CLI: creación rápida de prototipos

Hasta ahora, he explicado cómo usar la CLI de Vue para crear un nuevo proyecto desde cero, con todas las comodidades. Pero para una creación de prototipos realmente rápida, puede crear una aplicación Vue realmente simple, incluso una que sea autónoma en un solo archivo .vue, y servirla, sin tener que descargar todas las dependencias en elnode_modulescarpeta.

¿Cómo? Primero instale elcli-service-globalpaquete global:

npm install -g @vue/cli-service-global

//or

yarn global add @vue/cli-service-global

Cree un archivo app.vue:

<template>
    <div>
        <h2>Hello world!</h2>
        <marquee>Heyyy</marquee>
    </div>
</template>

y luego corre

vue serve app.vue

The standalone app

You can serve more organized projects, composed by JavaScript and HTML files as well. Vue CLI by default uses main.js / index.js as its entry point, and you can have a package.json and any tool configuration set up. vue serve will pick it up.

Since this uses global dependencies, it’s not an optimal approach for anything more than demonstration or quick testing.

Running vue build will prepare the project for deployment in dist/, and generate all the corresponding code, also for vendor dependencies.

Webpack

Internally, Vue CLI uses webpack, but the configuration is abstracted and we don’t even see the config file in our folder. You can still have access to it by calling vue inspect:

Download my free Vue Handbook


More vue tutorials: