Componentes de Archivo Único en Vue.js

Cómo siempre Nacho explicando qué es cada cosa, porqué está ahí y para qué sirve. Que gran profesor!

Es genial que explique cada linea!

Con Vue podemos crear componentes de múltiples formas, la más sencilla es cómo vismo en un post anterior donde utilizamos el método Vue.component().

Sin embargo esa forma, aunque es la más sencilla y práctica, no es la más escalable, ya que nos obliga a escribir el HTML dentro del método Vue.component() o a utilizar múltiples <templates> en el HTML.

Para solventar esto, existe una solución que junto con Webpack y un módulo (vue-loader) nos permite tener en un único fichero la vista (template), el diseño (css) y la lógica (javascript). Estos ficheros tienen una extensión .vue

Justo estaba pidiendo VueCLI en una clase pasada y aquí está xD

La diferencia entre usar VueCLI y usar Vue como un script en HTML, demás de verse más organizado y profesional, es que a nivel de código es más eficiente, pues con Vue CLI es nuestra computadora kla que se encarga de compilar los archivos .vue y dejar ya preparado el HTML puro para que el navegador solo lo cargue y lo ejecute, a diferencia de VueJS en un script que es menos eficiente (Y malo para SEO) pues de manera inicial se van a cargar las etiquetas desconocidas de Vue y demás, y va a ser la computadora del usuario la que se va a encargar de ejecutar todo el código de Vue, haciendo que la carga de la página sea más lenta

Postcss fue removido en la nueva version!!!

Que satisfacción que exista Vue!!! Vengo del curso de Angular y que laberinto(para mí)! Antes de conocer Angular odié Vue, luego de conocerlo lo amé jaja

Asi se ve hoy el main.js

import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

Me gustaría tener el código usado en cada clase, así como una breve descripción en cada contenido, como en otros cursos 😦

Al parecer la versión que instalé de Vue CLI 4.3.1 ya no genera el archivo de postcss.

Nacho! que buena clase! Gracias!

¿Cómo se llama el tema y los iconos que usas?

Single File Components

Son archivos .vue que nos ofrece el Framework para poder trabajar con la lógica, con el CSS o los estilos y con el template, el HTML de un mismo componente. Es decir, en un mismo archivo tendremos el HTML, la parte de lógica con el JS y los estilos con el CSS.

Estos archivos no son soportados por los Browsers, por la parte detrás se tendrá se tendrá todo un Tuling generado por el CLI generando un archivo entendible por el browser a partir del .vue. Es decir tomará todos los archivos vue, convirtiéndolos a JS que sea entendible por el browser.

Importar componentes:

Lo que se realiza es importar el componente en dónde se requiere utilizar, y se declara dentro de la propiedad componentes para decirle que está disponible en la propiedad componentes para ser utilizado.

import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};

De ésta forma se importa un componente, se declara dentro de componente y se utiliza así en el HTML:

<HelloWorld msg="Welcome to Your Vue.js App" />

Qué clase tan genial

25.-Single File Components

Son archivos .vue que nos ofrece el framework para poder trabajar con la lógica, con el css y con el HTML dentro de un mismo componente, es decir dentro de un mismo archivo vamos a tener las 3 partes. Estos archivos no son soportados por los browsers por lo que tendremos todo un tooling por detrás configurado por el CLI que se encarga de que generemos un código entendible por el browser a partir de el .vue

Las librerías no tienen “./” o ruta relativa.

$mount(’#app’) tiene el mismo propósito que que el “el” en las primeras prácticas.

La función render es una forma de reemplazar la instancia de la app dentro de nuestro componente, es decir, que esa configuración equivale a lo que hacíamos dentro de las apps que hemos hecho.

Cuando corremos npm run serve lo que hace el CLI es usar webpack y otras cosas para generar una app.

Los Single File Components (componentes escritos en archivos) son archivos con la extensión .vue que nos ofrece el framework para trabajar la lógica, el CSS y el HTML de un componente en un solo archivo.

Este archivo es compilado por Vue gracias a las configuraciones del CLI para generar archivos para el navegador.

El atributo scoped dentro de la etiqueta style indica que esos estilos solo serán aplicados al componente donde están.

Que genial esta clase, excelente forma de explicar los componentes creados.

para una posible actualización de este curso, se recomienda comenzar desde este punto.

Como siempre, el profesor deconstruyendo el por que de las cosas ❤️

Son archivos .vue que nos ofrece el framework para poder trabajar con la lógica, con el CSS y el template de JavaScript dentro del mismo componente.

• El atributo scope nos indica que el estilo se va a aplicar únicamente a este componente.

EXCELEEEEENTE EXPLICACION!!!👌🏼👌🏼👌🏼👌🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼

Es Genial la explicación!.

Excelente explicacion del profe

Año 2021 Y creo que gran parte ha desaparecido como babel, postcss y algunos otros.

También existe otra forma de como cargar un componente. como lo muestro en el siguiente ejemplo:

Excelente clase!

Que bueno que explica para que sirve

Me viene gustando MUCHO Vue ❤️

Ahora a construir nuestra primera App profesional en Vue

Asi con esa estructura ya se ve mas bonito Vue!

Sencillamente lo hace todo mas facil, muchas gracias Ignacio, nos muestra lo maravilloso y bien estruturado que es Vue

muy buen profesor, excelente…

👌

Excelente

Vue es genial !