App.vue e HelloWorld.vue (Diferenças no curso)

Fala pessoal,

Esse curso de VueJS é massa. Mas apenas um ponto de atenção para quem está fazendo o curso em 2021.

A estrutura dos diretórios padrões sofreu algumas alterações.

No curso existe apenas um componente criado o App.vue e tudo é feito nesse componente.

Agora o pessoal do Vue separou em 2 componentes, App.vue e HelloWorld.vue. Ou seja, o conteúdo da tela inicial está dividido 2 partes (real objetivo do VueJS, trabalhar com componentes).

Sendo assim, no script do componente App.vue, ele importa o componente HelloWorld.vue e no template ele faz um esquema de <HelloWorld msg="Welcome to Your Vue.js App"/> que chama a interpolação que está declarada no componente HelloWorld.vue, na tag h1.

Parando pra pensar, nesse caso o App.vue será apenas o View da página (sem muitos segredos), ou seja, mostrar os conteúdos. Pois ele importa o componente HelloWorld.vue que é quem faz toda a parada acontecer por trás.

Como fica a parte do Script do componente App.vue :

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>