PUG

9/53
Recursos

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.

Aportes 30

Preguntas 5

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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!!

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.

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

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

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

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

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?

npm i -D pug-loader

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/

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

驴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

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

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

Pug 鈥 el Python de HTML jajaja

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

Realmente PUG es como bien lo mencionaban agregar complejidad instrumental sin necesidad. M谩s cuando no ahorra tiempo debido a que es mucho mas simple usar un plugin de snippets en tu editor de codigo.

La verdad no uso mucho Pug, pero es entretenido ver las diferencias entre que hay con el HTML puro

Se nota que se utiliza menos c贸digo pero estar铆amos a帽adiendo una complejidad accidental o extra?

se instala pug como herramienta de desarrollo y el pug-loader, sin embargo ya no es necesario configurar el loader dentro de webpack pues ya lo trae el vue-loader.

npm i -D pug pug-loader

xq pug xq?

La verdad pug es un buen preprocesador y es una herramienta importante , se puede decir que no es utilizable sin embargo, para los que trabajan utilizando conveciones de c贸digo en equipos de trabajo, esta perfecto.

En mi experiencia, pug me ha servido bastante cuando quiero hacer full maquetaci贸n de un sitio desde 0, por ejemplo si necesito pasarlo a wordpress, pug me da mucha facilidad de manejar los templates y reutilizar c贸digo. Pero de ah铆 a usarlo con angular o vue creo que no lo usar铆a, ya de por s铆 tener los componentes divididos hace que la parte HTML sea peque帽a y precisa.

Yo conoc铆 a Jade gracias a ExpressJS. Pero con VueJS no encuentro sentido el usarlo ya que trae sus propios ciclos y condicionales.
Solo le veo el caso para ahorrar tags de cierre.

驴O existe otra funcionalidad que no puedo vislumbrar?

yo me adelante e instale Pug en un par de pasos antes, soy fan de Pug desde que se llamaba jade.

muchas gracias por tomarte el tiempo de ense帽arnos tantas herramientas utiles en el desarrollo de un proyecto, muy buena explicacion.

OMG pug es, hacer mas facil el code OOOMMMGG

Nacho buen curso pero hubiese sido interesante que nos mostraras como configurar nuestro entorno de trabajo de una forma mas rapida y practica usando vue ui para instalar esos plugins y de ahi si ver que cambios hacer

Con HTML estaba bien, no era necesario PUG

馃憣

Genial que ense帽en a integrar Pug con VueJS. Para desarrolladores acostumbrados a python se facilita la lectura con Pug.