Creación del componente para las cards
Clase 6 de 21 • Curso de Server Side Rendering con Nuxt 2
Contenido del curso
Mauricio Combariza
student•
hace 3 años
Clase 6 de 21 • Curso de Server Side Rendering con Nuxt 2
Contenido del curso
Mauricio Combariza
Mauricio Combariza
Fabricio Orrala
Diana Martinez
Fabricio Orrala
Estilos About-me
<style lang="scss" scoped> .about-me { @apply w-full flex flex-col justify-center items-center px-4 py-16 bg-gray-200; h1 { @apply font-black text-4xl text-gray-900 pb-2; } p { @apply text-lg py-2; } } </style>
Estilos ArticleCard
<style lang="scss" scoped> .article-card { @apply block bg-white sm:border sm:rounded-lg p-4; h3 { @apply font-bold text-xl mb-2 mt-0; } div.author { @apply my-2; p { @apply m-0; } small { @apply italic; } } figure { img { @apply w-full; } } p { @apply my-4 font-serif; } div.actions { @apply flex gap-2; .btn { @apply w-full text-center border rounded-full px-8 py-2 bg-gray-200 hover:bg-gray-300; } } } </style>
Si el estilo CSS crece mucho (aunque por tailwind se espera que no), o si el codigo javascript/typescript crece, recomiendas separar ésto en múltiples archivos? Es decir, uno para el TS/JS otro para el html (Vue) y otro para el SCSS/CSS ?? Como afecta el naming de las paginas? Ahi si las ponemos en directorio específico?
Claro, siempre puedes reorganizar todo como sea necesario, en el ecosistema de Vue más que separar el template, js/ts y los estilos, lo que se recomienda es separar en componentes más atómicos y específicos, cada uno con su template, código y estilos.
El naming puede ser el que necesites, pero la regla para que genere las rutas es que sea dentro de pages aquello que quieras hacer vue, y la estructura de la carpeta será el resultado en la URL.
Gracias!