No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Primeros Componentes

28/38
Recursos

Aportes 36

Preguntas 15

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥淐TRL + ,鈥 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

Esta es la parte del curso que esta esperando!馃憦馃徏馃憦馃徏馃憦馃徏

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

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.

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

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鈥lguien 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 鈥渘o 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!???

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?