Primeros Componentes

El código para empezar el componente

<template>
   <header class="shadow w-screen">
       <nav>
           <nav class="flex items-center justify-between flex-wrap bg-green-400 p-6">
               <div class="flex items-center flex-shrink-0 text-white mr-6">
                   <span class="font-semibold text-xl tracking-tight">PlatziExchange</span>
               </div>
               <div class="hidden sm:block w-full blok flex-grow lg:flex lg:items-center lg:wauto">
                   <div class="text-sm lg:flex-grow"></div>
               </div>
           </nav>
       </nav>
    </header> 
</template>

Si a alguien no le funciona el Prettier, es cuestión de que se metan a los setting de Visual Studio y busquen Format On Save, y activen la opción…

Algo que esta muy genial, es que si tienes algún error en el template, con npm run lint, tus errores son corregidos automáticamente

Nota: Prettier corrige los estilos siempre y cuando tengas configurado en el vscode esta opción, Format On Save : True o dar visto bueno

SI prettier no te formatea el codigo cuando guardas y usas VS Code, puedes hacer lo siguiente:

1)Pulsa “CTRL + ,” para abrir la configuracion de VS Code.
2)Ve a la parte de format.
3) luego pulsa formatear cuando se guarda,.

Y listo, espero les sirva.

Para que Prettier actué automáticamente cuando se le de guardar

Para los que presenten el siguiente error: “error Delete ␍ prettier/prettier”, solo cambien la linea de secuencia en visual studio de CRLF a LF.

Esta es la parte del curso que esta esperando!👏🏼👏🏼👏🏼

Si quieren trabajar con ESLINT y PRETTIER sin que tengan conflictos compartidos, agregen esto a su configuración de .eslintrc.js:

Primeros Componentes

La única regulación al momento de crear nuevos componentes es que éstos no pueden tener nombres de componentes ya existentes, como pueden ser: Header o div, es necesario integrar nombres custom para que los componentes no se planchen con los componentes ya existentes en HTML.

Se pueden tener componentes que no tienen el tag script, es totalmente válido, es posible tener componentes que solamente tienen viste, la parte de HTML, pero que no tienen la parte de estilos ni la parte de la lógica.

Al usar la nomenclatura de propiedades completa nos permite validar el tipo, al definir un valor default, para un array o un objeto es necesario definir una función que devuelva un array(para un array) o un objeto(para un objeto). En cambio para un valor nativo como un boolean, simplemente se puede poner true o string.

La estructura natural del HTML o del DOM se da cuando combinamos elementos a partir de una estructura de árbol, una estructura jerárquica.

Me gusta esta forma de trabajar con Vue, y creo que aquí se puede apreciar una de las grandes ventajas de Vue, que es que puedes copiarte algún componente de internet (En este caso de la sección de recursos) y pegarlos tal cual en tu proyecto y va a funcionar, es increíble!

Dado que no pude bajar tailwincss, para no atrasarme adapté el ejercicio a bootstrap.

Hemos aprendido a crear componentes y a incluirlos dentro de otros componentes.

es recomendable el uso de prefijos para los nombres de los componentes para no tener errores.

Una duda cada vez que realizo un cambio debo volver a escribir sudo npm run serve para ver los cambios en el codigo o existe una forma mas facil de hacer esto?

en resumen se crea los componentes PxHeader, PxAssetsTable y PxIcon este ultimo esta siendo importado dentro de PxHeader los demas estan siendo llamados en App.vue

Que aplicaciones me permite crear imágenes svg de forma intuitiva? de seguro hay online o de escritorio… pero desconozco este tema

Pregunta tonta… por que el pxicon no necesita tag de script con su export?

tailwin me genera un error…alguien sabe por que
![](

También se pueden importar los componentes así, y ya quedan expuestos para ser usados.

components: {
   Header: () =>  import("./Header.vue"),
},

Por fin un profesor que realmente se enfoca en codigo del curso y no en css

Que buena clase aprendí mucho

Creo que no me estaría funcionando el ESLint, porque no me marca los errores como “no se está usando el componente”, cómo podría activar ESLint? o es algún plugin específico de VSCode?

Por fin llegamos a la parte del curso que esperaba y necesitaba para mis proyectos!!!

Creación de archivo SVG

Por qué es posible importar el componente PxIcon sin nisiquiera colocar la sentencia export en ese componente?

No se de donde saca el archivo svg, se que debo abrirlo como imagen, pero que imagen es la que debo poner!???

https://prettier.io/

Great!!!

Tailwind CSS IntelliSense
Esta extensión ayuda con las clases de Tailwing, te las sopla mientras las escribes.
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Y para que funcione en archivos .vue puedes agregar la extension .vue en el archivo de settings

no entendi por que en la propiedad assets que creaste en valor por defafuld hiciste que devuelva un array que sentido tiene?

¿Puedo hacer algo con atom para que me detecte el .vue? me lo toma como si fuera un archivo txt.

Porque mi navegador ya no reconoce que mi pagina es Vue?

yo use esta pagina para poner iconos personalizados 😄 Documentacion de Vue.js para Iconos

Ahora comprendo mejor todo, cuando regreso a ver el curso y estoy creando un proyecto personal. Gracias profe 😋

No encuentro los Archivos que dejaste.
24 de Febrero, 2021

¿Porque el profesor coloca llama al componente con <px-header />? ¿No entiendo porque usa esa sintaxis si el no le ha puesto el nombre al componente de esa manera?