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 | Desarrollo Web
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

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Vue.js Vs. React

Vue.js Vs. React

Desarrollo Web

01 de Agosto de 2018

Realizamos una comparativa entre Vue.js y las otras opciones frontend más utilizadas en el mercado, como son React y Angular. Crea tu propia opinión y acierta en elegir la tecnología que ...

¿Qué es Vue.js?

¿Qué es Vue.js?

Frameworks

26 de Octubre de 2017

¿No sabes qué es Vue.js? Es un Framework progresivo, es decir, es un Framework que sirve para consumir interfaz del usuario. Te contamos más sobre Vue.JS en este artículo.

Curso Vue.js en Español

Curso Vue.js en Español

curso

Con Vue.js podrás crear aplicaciones con interfaces web interactivas, creando desde componentes dinámicos hasta Single Page Applications.

Duración: 6 horas y 59 minutos

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