Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Vue-CLI paso a paso

José Manuel Rosa Moncayo
  • Escrito por José Manuel Rosa Moncayo el 12 de Diciembre de 2017
  • 1 min de lectura | Frontend
Vue-CLI paso a paso
El reproductor de video será cargado en breves instantes.

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.

capturaUno

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.

capturaDos

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

$ cat vue-simple/index.html

capturaTres

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.

capturaCuatro

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

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars