VUE CLI/UI Creación de Proyectos

Creacion con CLI

Instalar NPM y NODE a traves de nodejs.org el instalador incluye la ultima version estable de NPM, versiones disponibles para Windows, macOs y Linux.

• Instalar la linea de comandos (CLI) de Vue, preferiblemente de manera global.

npm install -g @vue/cli

• Ubicar una carpeta donde se quiera crear el proyecto y tilizar el siguiente comando

vue create vue-proyecto-cli

• Apareceran las siguientes opciones que nos permitiran elegir un preset pre-configurado para el proyecto.

Menu de Opciones Vue CLI 1

• Si se quiere personalizar la configuracion inicial del proyecto seleccionar Manually select features y seleccionar usando el menu.

Menu de Opciones manual Vue CLI

• Ejecutar el proyecto con los iguientes comandos.

   cd vue-proyecto-cli
   npm run serve
  

El ultimo comando creara un servidor para probar nuestra aplicacion de Vue

Servidor ejecutandose

Aplicacion de Vue en el navegador

Creacion con UI

• El siguiente comando nos permite crear un proyecto a traves de una interfaz grafica, la cual cargara en el navegador.

vue ui

• En la pantalla del navegador se selecciona Create a new project here

Menu de Opciones Vue UI

• Se escribe el nombre del proyecto

Menu de Opciones Vue UI 2

• Se selecciona un preset preconfigurado o se selecciona la opcion de configuracion Manual

Menu de Opciones Vue UI 3

• Seleccionar las opciones a utilizar

Menu de Opciones Vue UI 4

• Seleccionar configuracion

Menu de Opciones Vue UI 5

• Al finalizar se muestra la pantalla de dashboard del proyecto, puede instalarse plugins y ejecutar tareas con el menu de la izquierda.

Menu de Opciones Vue UI 6

• Para ejecutar el proyecto, es necesario usar la opcion de tareas, y se selecciona la tarea serve, la cual ejecuta un servidor despues de presionar el boton run task .

Menu de Opciones Vue UI 7

Aplicacion de Vue en el navegador