Vue-CLI paso a paso

Instalación de Vue-cli

Desde la terminal colocamos:

$ npm install -g vue-cli
.....

Luego inicializamos vue y le colocamos un nombre al template y colocamos en cual directorio lo vamos a guardar:

$ vue init <template-name> <directory>

Accedemos al directorio:

$ cd <directory>

Dentro de ese directorio instalamos todas las dependencias que tendrá el package:

$ npm install

Templates.

Concretamente existen 6 pero podemos crear nuestros propios templates a nuestros gustos y necesidades.

Entre los 6 están:

1. Simple: Es el template mas simple en un fichero HTML. Ideal para empezar con VUE desde cero.
2. Browserify-simple: Basado en browserify, ofrece una configuración básica de este con vuetify.
3. Browserify: Ofrece una configuración completa basada en Browserify, añadiendo configuraciones y tareas para el hot-reload, linting y test.
4. Webpack-simple: Basado en Webpack, ofrece una configuración básica de este junto a vue-loader.
5. Webpack: Ofrece una configuración completa basada en Webpack + vue-loader, añadiendo configuraciones y tareas para el hot-reload, linting, test y extracción de CSS.
6. PWA: Creado por Addy Osmani, configura nuestra APP para que sea una PWA basada en Webpack + vue-loader.

Vamos a instalar y a probar el template Simple y PWA.

• Lo primero a realizar es la instalación de vue-cli.

• Luego inicializamos el template. Cuando pulsemos enter el vue empieza a analizar, a descargarlo y a realizar una serie de preguntas: nombre y autor del template.

Ya con esto se tendría instalado el template. ¡Fácil y rápido!

Para ver que tiene nuestro template colocamos en la terminal:

$ ll vue-simple

Aquí se listará lo que contiene el template Simple el cual solo tiene un index.html.

Para ver lo que contiene el index.html colocamos desde la terminal:

$ cat vue-simple/index.html

Lo que se tiene es un ejemplo ya preparado con Vue pero no tenemos mas nada, es solo un ejemplo y en base a esto empezamos a desarrollar.

Ahora probemos con PWA:

Desde la terminal colocamos:

$vue init pwa vue-pwa

Despues que pulsemos enter realizará una serie de preguntas:

• Nombre del proyecto.
• Nombre corto del proyecto.
• Descripción del proyecto.
• Autor.
• Constructor de Vue: Aquí se debe seleccionar entre Runtime + Compiler y Runtime-only.
• ¿Instalar vue-router?(Y/n)
• ¿Usar ESLint para el código?(Y/n)
• Seleccionar un preajuste de ESLint (Standard,Airbnb, none)
• ¿Configurar las pruebas unitarias con Karma + Mocha? (Y/n)
• ¿Configurar las pruebas e2e con NightWatch?(Y/n)

NOTA

Un consejo para desarrollar utilizando el template PWA o Webpack ES utilizar el Runtime + Compiler para asi poder utilizar todas las funcionalides que ofrece Vue-CLI.

Luego accedemos al directorio:

$cd vue-pwa

Instalamos:

$npm install

Hasta aquí se ha podido ver como instalar dos templates distintos con Vue-CLI de una manera fácil y sencilla dependiendo de lo completo y lo complejo que queramos utilizar para nuestro proyecto. Las preguntas que nos va haciendo se pueden responder, se pueden añadir más plugins o menos plugins y a partir de ellas podemos empezar a trabajar.

Artículo desarrollado a partir del vídeo por Ana Gabriela Durán.