Ir al contenido principal

Entradas

Mostrando las entradas etiquetadas como vue

JHipster: una plataforma para desarrollo web

JHipster es una plataforma de desarrollo para generar, desarrollar e implementar rápidamente aplicaciones web modernas y arquitecturas de microservicios. Ofrece: Compatibilidad con tecnologías Frontend: Angular, React y Vue. Compatibilidad con tecnologías Backend: Spring Boot, Quarkus. Micronaut, Node JS y .NET. Compatibilidad con Cloud: AWS, Azure, GCP, Heroku y OpenShif. Compatibilidad con: Docker y Kubernetes. Imagina crear una aplicación web con Spring Boot, con Kotlin como lenguaje base. Elegir una herramienta Frontend como Vue, además crear un contenedor o contenedores con Docker y administrarlo con Kubernetes. Y finalmente subirlo a la nube de AWS. Eso es lo que ofrece JHipster . Inicio rápido con JHipster Requisitos: Tener Java instalado (JDK 17+).  Tener Node JS instalado.  Tener Docker instalado (recomendable). Instalamos JHipster: $ npm install -g generator-jhipster Creamos un directorio: $ mkdir generador && cd generador ...

Creando un proyecto con Vue JS

Vue Js es considerado un Framework progresivo en el cual se van agregando módulos de acuerdo a la necesidad que vaya surgiendo. Al trabajar con este framework nos encontraremos que es muy similar a Angular y/o React JS. Vue Js , al igual que otras herramientas, es ideal para el desarrollo de aplicacaciones tipo SPA. Pero, ¿qué es una SPA? Una Single-Page Application (SPA) es un tipo de aplicación web que ejecuta todo su contenido en una sola página. Y funciona más o menos así: Al abrir la página web completa se irá cargando el contenido HTML, CSS y Javascript. Al abrir otra sección no se cargará de nuevo todo el contenido, solo esa sección. Así se obtienen diferentes vistas sobre la misma página. Es una forma dinámica de trabajo.  ¿Qué se necesita antes de usar este framework (y cualquier otro similar)? Tener nociones de HTML. Tener nociones de CSS. Tener nociones de Javascript. Un framework, en teoría, nos facilitará la existencia a la hora de desarrollar una aplica...

Instalar Vue CLI

Instalamos Vue Cli con: $ npm install - g @vue / cli Comprobamos su instalación con: $ vue -- version Crear proyecto con: $ vue create my - app Ubicarnos en el directorio creado: $ cd my - app Ejecutar: $ npm run serve Abrir navegador en http://localhost:8080 También podemos crear una aplicación con: $ vue ui Se abrirá el navegador en la dirección: http://localhost:8000/project/select Elegimos Crear, elegimos un directorio de instalación y los plugins a usar. Links: http://alquimistadecodigo.blogspot.com/2018/06/vue-js.html

Vue JS (v-model, v-if, v-for)

He aquí un ejemplo de Vue JS. <!DOCTYPE html> < html lang = "es" > < head > < meta charset = "utf-8" > < title > Curso de Vue JS </ title > < script src = "https://code.jquery.com/jquery-3.7.1.js" integrity = "sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin = "anonymous" > </ script > < script src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" > </ script > </ head > < style > . clase { background-color : # 4ac8b8 ; color : black ; font-weight : bold ; } </ style > < body > < h1 > Programando con Vue JS </ h1 > < div id = "app" > < h2 > 1. {{ titulo }} </ h2 > < div > < h3 > Libros </ h3 > < ol > < li v- for = "libro in libros" > {{ libro }} </ li > </ ol > </ di...

Vue JS

Vue JS es un framework javascript "progresivo" para uso aplicaciones dinámicas sencillas y/o SPA (Single-Page Application). Similar a Angular. Ejemplo. Crearemos una simple página HTML y colocaremos esto en el <head> </head> < script src= "https://code.jquery.com/jquery-3.7.1.js" integrity= "sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin= "anonymous" > </ script > < script src= "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" > </ script > Con esto ya podremos usar Vue JS sin necesidad de instalarlo. El paso que sigue es crear un div, el id será "app" y el mensaje que visualizaremos se verá reflejado entre las llaves {{aqui}} de la siguiente forma: < div id= "app" > < h1 > {{ titulo }} </ h1 > < h5 > {{ mensaje }} </ h5 > </ div > Por último agregaremos un script: < script > new V...