Configuración de Pag para optimizar el workflow de desarrollo HTML

Clase 9 de 53 • Curso Profesional de Vue.js 2

Resumen

PUG nos permite crear HTML con otro tipo de sintaxis, escribiendo menos código, y a través de webpack compilarlo para que funcione en el navegador.

Miguel Sosa

student•

A mi Pug no me facilita nada, es aprender otra cosa más, cuando HTML es lo más sencillo del mundo, y utilizando emmet ni hablar, mucho más sencillo aún ¬¬, no se porque se empeñan en usar Pug, no hace falta…

Ricardo Celis

teacher•

Hola Mikesan! Gracias por tu feedback en este caso probamos enseñar pug como un pequeño plus, pero entiendo totalmente tu punto de vista y lo tomaremos muy en cuenta!

Nacho Anaya

teacher•

Son opciones, a algunos les puede resultar mas comodo y a otros no. A mi criterio se escribe mejor calidad de codigo, mas rapido y mas facil de seguir. De todos modos es algo que podes no utilizar. Podes seguir los ejercicios y en la parte de template setear el lang html en lugar de pug y usar los elementos html tradicionales. Cualquier consulta no dudes en avisar.

Samuel Mata

student•

Saludos amigos, para el que este haciendo el curso con la nueva version de vue-cli (3+), deben instalar estos paquetes para que puedan usar pug:

npm install -D pug pug-plain-loader

Hasta luego!!

Moisés Cedeño

student•

Gracias amigo.

Eden Gomez Gress

student•

Gracias buen hombre!

David Daniel Castillo Nava

student•

Y dale con el Pug!! Me quedo con mi html legible esa vaina no es nada legible.

Edwar Cedeño

student•

Opino lo mismo… no es legible 😦

Jafet López Chaves

student•

😂😅 si Pug pude ser algo molesto, pero es interesante aprender algo nuevo y más algo que nos vuela la cabeza como Pug

José Roberto Meza Cabrera

student•

Leo los comentarios molestos por enseñar cosas que no son Vue, yo como profesional del BackEnd, agradezco que me muestren estas tecnologías, ya que estoy desarrollando un proyecto serio, y prefiero aprender más tecnologías que me ayuden en el desarrollo en vez de tardarme mas tiempo haciendolo todo yo por mi cuenta.

Sin embargo, creo que si debería ser como un curso extra, y no parte del curso de Vue.

Carlos Eduardo Gomez García

teacher•

En efecto a mi no me gusta PUG, html por si solo es muy entendible, para mi es más difícil leer PUG que HTML, interesante aprenderlo pero me quedo con HTML

En lo personal PUG no me aporta nada, SCSS todavía facilita cosas, pero es que PUG... no me convence

Bryan Estiven Silva Mercado

student•

aunque digan que pug no es necesario es bueno en cuestión de conocimientos , siempre muy bueno aprender algo nuevo y mas si es un plus que tal vez te sirva algún día

Arturo Muñoz

student•

No veo la necesidad de ocupar PUG …

Nacho Anaya

teacher•

Hola, realmente no es una necesidad. Es algo opcional que puede usarse con Vue. La idea es darle un valor extra al curso aprendiendo o usando herramientas. Es bastante comun utilizar Pug a la hora de trabajar con Vue, pero no es algo obligatorio. A mi particularmente me gusta porque te permite escribir HTML mas rapido y corto.

De todos modos si no es de tu agrado podes seguir el curso perfectamente y realizar los ejemplos en HTML. Todo lo que es markup podes hacerlo como te guste, lo importante es respetar la estructura base, las directivas, filtros y expresiones que vayamos viendo de Vue.js.

Arturo Muñoz

student•

Creo que el objetivo de este curso es aprener a fondo vuejs, para mi utilizar pug no es ningún valor extra.

Saludos

Vicente López Robles

student•

Ya lo usamos en el curso anterior y la verdad no me gusto, se me hace tiempo perdido, mejor usar el html

Luis Donaldo Lopez Gil

student•

npm i -D pug-loader

Fernando Jose Morales Rodriguez

student•

gracias bro

Aarón González

student•

Por si tienen proyectos con htmls extensos, esto podría servirles para ahorrar tiempo. https://html2jade.org/

Emiliano Kuyen Arturo Pacheco Montero

student•

estaba tratando de recordar cómo se llamaba pug antes jajaja gracias!

Eros Sosa

student•

Entiendo que pueda ser una herramienta útil para alguno, pero el uso de PUG confunde, no permite visualizar el html tal cual es y concentrarse plenamente en la sintaxis de Vue, en lugar de hacerlo más claro lo hace más confuso. Si no saben escribir html correctamente, deberían aprender.

Es saturar al estudiante desde el inicio, que viene por Vue y dan por sentado que saben usar sass ( yo po ej uso less ), y además pug. Porqué no usar el css de bulma en lugar de tratar de dar todo el workflow de una?

Rodrigo Ramos Xochiteotzin

student•

saben si pug se sigue usando en 2022?

Juan Esteban Galvis

student•

La verdad me gusta Pug (Veo que a varios compañeros no les gusta jaja y tienen sus buenos motivos) pero puede hacer HTML y convertirlo a Pug mediante extensiones, recomiendo estas dos para VSC:

Yo normalmente agrego Pug de otra manera más sencilla: https://www.npmjs.com/package/vue-cli-plugin-pug

Y si alguno no conocía Pug les recomiendo el curso de Preprocesadores donde se explica (Junto con los de CSS): https://platzi.com/clases/preprocesadores/

Ruth Ibarra Mendez

student•

Al instalar Pug unico que veo es que hay mucha inherencia para poca complejidad como lo mencionaban en los videos anteriores

Ruben Eduardo Acosta Vela

student•

Pug es un standar para trabajar con Vue?

Diego Forero

Team Platzi•

No, puedes escribir directamente html sin problema.

Gabriel Chávez

student•

No, PUG es un motor de plantillas, para escribir HTML con mayor fluidez y una mejor sintaxis. En VueJS puedes incrustar HTML como tal o usar casi cualquier preprocesador.

jonathan sanchez

student•

¿Qué es Pug? Bueno es un template engine que mejora la legibilidad de nuestro código. Dando como resultado más facilidad a la hora de dar mantenimiento y aumentando la productividad de nuestro proyecto.

npm install -D pug pug-loader

Mayder Cortés B

student•

Home de vuetify en html y en pug

Html:

Pug:

La Indentación que tengo de html es diferente a la de pug, aun asi se me hace menos codigo usando pug y es facil de usar y mas legible a mi parecer.

resultado de ambos

Leonardo Campo Romero

student•

Excelente el uso de Pug, me parece genial para facilitar la lectura del código.

Miguel Angel Reyes Moreno

student•

Pug ... el Python de HTML jajaja

Luis Lujan

student•

Pésimo ese PUG, solo le aporta dificultad innecesaria.

Configuración de Pag para optimizar el workflow de desarrollo HTML

Introducción

Desarrollo de Aplicaciones Profesionales con VueJS

VueJS: Creación y Desarrollo de Aplicaciones Web Progresivas

CLI y Dev Tools

Herramientas esenciales para desarrollar con BioJS y NodeJS

Creación de una Aplicación Vue.js con CLI y Webpack Simple

Configuración y uso de Webpack en proyectos JavaScript

Configuración y uso de Babel para compatibilidad JavaScript

Configuración de eSlimt con EstándarJS y Webpack

Integración de SaaS y Bulma en Aplicaciones Vue.js

Configuración de Pag para optimizar el workflow de desarrollo HTML

Diseño de Mockups: Práctica y Colaboración en Comunidad

Creación de Vistas con Mockups y Vue.js

Manipulación del DOM

Expresiones en Vue: Manipulación Dinámica del DOM

Directivas de Vue: Uso y Funciones Principales

Data Binding y Directivas en Vue: bmodel y bevined

Propiedades Computadas en JavaScript: Creación y Uso Práctico

Uso de Watchers en Biomóvil para Gestión de Cambios de Propiedades

Manipulación de Eventos y Métodos en Aplicaciones Web

Creación de Interfaz con Vue.js y Framework CSS Bulma

Manipulación del DOM con Vue.js: Práctica y Ejercicios

REST y HTTP

Integración de Servicios HTTP con JavaScript y API Fetch

Uso de la librería Trae para peticiones HTTP con Fetch API en JavaScript

Integración de Servicios en Vue.js: Uso de API y Mejora de Código

Sistema de Componentes

Creación y Registro de Componentes en Vue.js

Creación de Componentes en Vue.js con Bulma para Platzi Music

Reactividad y Virtual DOM en Vue.js: Conceptos y Soluciones

Ciclo de Vida de Componentes en Vue.js: Hooks y Ejecución de Código

Comunicación entre Componentes en Vue.js: Props y Eventos

Comunicación entre Componentes en Vue: Eventos de Hijo a Padre

Uso de Slots para Inyección Dinámica de HTML en Componentes Vue

Comunicación entre Componentes Vue con Event Bus y Plugins

Vue Router

Vue Router: Creación de Single Page Applications

Instalación y Configuración de Vue Router en Aplicaciones Vue.js

Navegación de Rutas con Vue Router en Aplicaciones SPA

Extendiendo VueJS

Uso de Modifiers en VueJS para Mejorar Funcionalidad de Eventos

Filtros en Vue: Formateo de Duraciones de Canciones en Componentes

Creación de Directivas Personalizadas en Vue.js

Reutilización de Funcionalidad con Mixins en VueJS

Clases, Animaciones y Transiciones36

Integración de Animaciones CSS3 en Aplicaciones VueJS

Vuex

Gestión de Estados Centralizados con la Librería BuX

Integración de VueX y arquitectura Flux en Vue.js

Mutaciones en Vuex: Gestión y Actualización del Estado Reactivo

Uso de Getters en Vuex para Acceso Personalizado de Estado

Acciones asincrónicas en Vuex: cómo implementarlas y utilizarlas

Integración de VueX y Babel en PlatziMusic

Nuxt.js

Renderizado del Lado del Servidor con Vue.js y Nuxt

Creación de Proyectos con Nact.js en Vue para Server-Side Rendering

Integración de VueJS con Nuxt para Server-Side Rendering

Deploy a Producción con Now

Despliegue de Aplicaciones con NOW en BIOS JS

Despliegue de Aplicaciones Node.js con NOW y Webpack

Conclusiones

Construcción de Aplicaciones Profesionales con Vue.js

Bonus

Internacionalización de Aplicaciones con Vue I18n

Pruebas Unitarias con Vue.js y Webpack: Configuración y Ejecución

Autenticación en Vue.js con JSON Web Tokens (JWT)