Introducción a la CLI de Vue

En esta guía, aprenderá cómo instalar la CLI de Vue, cómo crear un proyecto de Vue con la CLI de Vue, cómo usar y guardar ajustes preestablecidos, cómo servirlos y compilarlos para producción, y cómo usar la interfaz de usuario de Vue.

Introducción

VueJS es un marco JavaScript progresivo que se utiliza para crear interfaces de usuario y Aplicaciones de una sola página (SPA), y la mejor manera de comenzar rápidamente es crear un proyecto VueJS utilizando Vue CLI (interfaz de línea de comandos).

En esta guía, aprenderá cómo instalar la CLI de Vue, cómo crear un proyecto de Vue con la CLI de Vue, cómo servirlos y compilarlos para producción, y cómo usar la interfaz de usuario de Vue. La construcción de un proyecto con la CLI creará un andamiaje para un proyecto, brindándonos un punto de partida preconfigurado sobre el cual podemos construir en lugar de comenzar desde cero.

Requisitos previos

Se requiere Nodo.js versión 8.9 o superior para usar Vue CLI en nuestro terminal (se recomienda v10+). ¡Con nvm, podemos administrar múltiples versiones de Node en la misma máquina!

¿Qué es la CLI de Vue?

Vue CLI es un paquete NPM que se instala en un dispositivo específico para permitir que los desarrolladores/usuarios accedan al comando vue a través de su terminal. Esta CLI, que se puede instalar globalmente o en un directorio específico de nuestra PC, nos permite montar rápidamente un nuevo proyecto y crear una aplicación con un solo comando.

Brinda a los desarrolladores de Vue una nueva experiencia y les permite comenzar a desarrollar aplicaciones de Vue sin tener que lidiar con una configuración compleja de herramientas como webpack. Al mismo tiempo, se puede configurar y ampliar con complementos para casos de uso más avanzados. Se compone de varias partes, incluyendo:

  • servicio CLI que proporciona múltiples scripts para trabajar con proyectos Vue, como los scripts serve, build e inspect.
  • complementos CLI que son paquetes NPM que brindan funciones adicionales a nuestro proyecto Vue, algunos de estos complementos incluyen mecanografiado, PWA, VueX, etc

Si no queremos manejar todo a través de nuestra terminal, la CLI de Vue permite a los desarrolladores realizar tareas a través de una interfaz fácil de usar, que exploraremos muy pronto.

Instalación de la CLI de Vue {#instalación de vuecli}

Siempre es una buena idea verificar si un paquete ya se ha instalado en nuestra PC antes de instalarlo, y podemos hacer esto para Vue CLI mirando su versión:

1
$ vue --version
1
$ vue -V

Si vemos una versión, significa que la CLI de Vue ya se ha instalado en nuestra computadora; de lo contrario, un error indica que no se ha instalado. Podemos instalar la CLI de Vue ejecutando el siguiente comando:

1
2
3
$ npm install -g @vue/cli
// Or
$ yarn global add @vue/cli

Por lo general, la CLI se instala globalmente, en lugar de localmente, por lo que es accesible en todo el sistema.

{.icon aria-hidden=“true”}

Nota: Incluso si la CLI ya está instalada, vale la pena actualizarla en caso de que aún no esté actualizada a la última versión.

1
2
3
$ npm update -g @vue/cli
// Or
$ yarn global upgrade --latest @vue/cli

Después de instalar con éxito Vue CLI en nuestra PC, ahora deberíamos poder acceder al ejecutable de Vue en nuestra terminal para mostrar una lista de posibles comandos y sus funciones. Esto se puede lograr ejecutando el siguiente comando:

1
$ vue

Que muestra la página de inicio:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 display help for command

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve                                      alias of "npm run serve" in the current project
  build                                      alias of "npm run build" in the current project
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires
                                             @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  outdated [options]                         (experimental) check for outdated vue cli service / plugins
  upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
  migrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugin
  info                                       print debugging information about your environment
  help [command]                             display help for command

  Run vue <command> --help for detailed usage of given command.

Creación de un proyecto Vue con Vue CLI

Una vez que la CLI de Vue se haya instalado correctamente, ¡creemos un proyecto de Vue! Con la herramienta, podemos montar fácilmente un proyecto y crear un esqueleto desde el que partir, incluida la importación de todas las dependencias necesarias y otras adicionales que quizás ya sepa que querrá. El comando crear, seguido del nombre del proyecto se usa para crear un proyecto esqueleto:

1
$ vue create my-cli-project

{.icon aria-hidden=“true”}

Nota: my-cli-project es el nombre del proyecto. ¡Cansate de los espacios! Cualquier espacio romperá el nombre.

Una vez que ejecute el comando, se le solicitarán tres ajustes preestablecidos:

1
2
3
4
5
Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

En los dos primeros, puedes elegir la versión Vue, junto con Babel y ESLint. Solo estos serán empacados. Si desea incluir otras dependencias útiles, como Vue Router, Vuex, etc., deberá seleccionar el ajuste preestablecido "Seleccionar funciones manualmente".

Aquí, puede recorrer la lista de dependencias disponibles, presionando Espacio para seleccionar cada opción que desea habilitar:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Continuará con varias preguntas de configuración, comenzando con la versión de Vue:

1
2
3
4
5
6
Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x

Seguido de las preguntas de cada módulo que hayas seleccionado que se puedan configurar:

1
2
3
4
5
Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

Al final, la CLI le preguntará si desea guardar estas opciones como Preset. Si lo hace, la próxima vez que cree una nueva aplicación, puede elegir entre este ajuste preestablecido además de los dos predeterminados:

1
2
3
4
5
6
7
8
9
Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) y

Una vez que proporcione un nombre para el ajuste preestablecido, aparecerá después de llamar al comando crear:

1
2
3
4
5
6
7
8
$ vue create my-app

Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
> my-preset ([Vue 3] babel, pwa, router, vuex, eslint)
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

O puede llamarlo directamente durante la creación:

1
$ vue create --preset my-preset my-app

{.icon aria-hidden=“true”}

Nota: Si nos olvidamos de instalar algunos complementos integrados mientras creamos scaffolding en nuestro proyecto, podemos agregarlos fácilmente usando el comando vue add my-plugin en cualquier momento posterior.

Una vez que se completa el proceso de creación, podemos ejecutar la aplicación en el servidor de desarrollo directamente desde la CLI usando el siguiente comando:

1
2
$ cd my-new-app
$ npm run serve

El directorio del proyecto se verifica fácilmente mediante el sistema de archivos o un comando como ls (dir para usuarios de Windows):

1
2
3
$ ls
README.md        jsconfig.json  package-lock.json  public/  vue.config.js
babel.config.js  node_modules/  package.json       src/

Luego nuestro navegador abrirá localhost:8080 donde veremos que la aplicación se está ejecutando:

¡Ahora, comienza el desarrollo! Puede continuar con su canalización de desarrollo estándar con los directorios y archivos creados por la herramienta. Cuando haya terminado el desarrollo o esté listo para enviar cambios a una etapa de producción, use el siguiente comando para crear un paquete de producción:

1
$ npm run build

Esto enviará todo a una carpeta dist dentro de nuestro proyecto, que se puede implementar en varias plataformas de alojamiento. ¡Echemos un vistazo a otro método para crear una aplicación Vue, pero en su lugar use la interfaz gráfica de usuario (GUI)!

Ver interfaz de usuario

Con la CLI de Vue, también puede iniciar otro proyecto: una GUI para crear aplicaciones:

1
$ vue ui

Esto iniciará la GUI en http://localhost:8000/:

Podemos comenzar un nuevo proyecto yendo a la pestaña "Crear", que le permitirá elegir la ruta para su proyecto:

Una vez que se ha elegido la ubicación para el proyecto, en una nueva página, puede ingresar el nombre y seleccionar su administrador de paquetes preferido:

El proceso de creación de proyectos esqueléticos es muy similar y el mismo código se ejecuta en segundo plano. Es solo cuestión de gustos, ya sea que prefiera la CLI o la interfaz de usuario. Del mismo modo, se nos pedirá que seleccionemos nuestro preajuste preferido, pero si hacemos clic en "Manual", seremos redirigidos a una página donde podemos seleccionar manualmente nuestros complementos preferidos, como se muestra a continuación:

Una vez más, después de establecer las configuraciones para las diferentes dependencias, puede guardar las opciones seleccionadas como un ajuste preestablecido.

Una vez que finalice el proceso de creación, accederemos al panel del proyecto, donde podremos ver todos nuestros complementos, agregar complementos, administrar la configuración y asignar tareas:

Estas tareas incluyen servir nuestra aplicación en nuestro navegador, construirla para producción, etc.

Conclusión

En esta breve guía, aprendió cómo funciona la CLI de Vue y cómo crear nuevos proyectos de esqueleto de Vue con ella. Hemos echado un vistazo a las configuraciones manuales y al guardado de ajustes preestablecidos, así como al servicio y la creación de proyectos. Finalmente, hemos echado un vistazo a la interfaz de usuario como una alternativa a la CLI. a la CLI.