Mão na massa!

Criando o projeto Vue

Com o terminal aberto, pode-se crie o projeto vue da seguinte forma:

& vue create myapp
1

Após digitar este comando, surge a pergunta do tipo de projeto que queremos criar. Vamos escolher "Manually select features" para escolher as bibliotecas mais importantes:

Das bibliotecas disponíveis, vamos selecionar: Babel, Router e Linter, conforme a figura a seguir:

Para todas as outras opções, deixe a padrão. O projeto é criado, e já podemos abrí-lo no VSCode da seguinte forma:

$ cd myapp
$ code .
1
2

Com o VSCode aberto, temos algo parecido com:

Dica

Talvez a estrutura de pastas esteja um pouco diferente, dada versão do vue deste curso (2.5)

Conhecendo os arquivos principais do projeto

A seguir vamos comentar alguns arquivos que fazem parte do projeto.

package.json Contém as configurações do projeto, como o seu nome, versão, os pacotes node que estão instalados e as rotinas para serem executadas quando você deseja, por exemplo, compilar (build) o seu projeto.

src/main.js Podemos considerar este o arquivo inicial do projeto, o que configura o Vue e algumas bibliotecas. Se você abrí-lo no VSCode, verá que ele "carrega" o arquivo App.vue.

src/App.vue Este é o primeiro componente Vue a ser carregado. Ele pode ser compreendido como toda a aplicação Vue na tela, sendo que demais componentes serão carregados "dentro" do App.vue. Veremos mais detalhes sobre isso.

src/router.js Define as rotas da aplicação, isto é, quando mudamos a url do navegador qual componente deve ser carregado. Na aplicação recém criada temos a url "/" que carrega o componente Home, e a url /about que carrega o componente About.

src/views/About.vue As "views" são componentes que o router carrega e adiciona na aplicação. Você pode pensar na view como uma página, onde cada página é carregada pelo router.

src/components/homeworld.vue Um componente pode ser definido como algo visual que será reaproveitado em diversas partes do seu projeto. Suponha que você crie um componente de upload de arquivos, e deseja usá-lo em 3 lugares diferentes. Então você deve criar este componente no diretório components. Neste curso não iremos focar muito na criação de componentes, apenas na criação de views.

Executando o seu projeto no modo "dev"

Para executar o projeto Vue, faça o seguinte comando no terminal:

$ npm run serve
1

O projeto será compilado, e terá como resposta algo como:

Acesse http://localhost:8080/#/ para ver o Vue em ação. Você verá algo como:

Como teste, abra o arquivo src/views/Home.vue e altere a mensagem de boas vindas para "Bem vindo a sua aplicação Vue". Quando salvar o arquivo, verá que a aplicação foi recompilada e a página no navegador atualizada.

Compreendendo melhor o router

O principal objetivo do router no Vue é carregar os componentes na tela de acordo com uma rota estabelecida. Para conhecer melhor o router, você precisa saber onde ficam 3 funcionalidades básicas:

  • Onde o router é configurado? Ele fica especificamente no src/router.js. Lá você encontrará duas rotas. A primeira, usa o caminho "/" e aponta para o componente Home. Isso é, quando a url for "/", carregue o componente "Home". A segunda rota usa o caminho /about e liga ao componente "About". Criar novas rotas é criar mais uma entrada nessa lista, relacionando o caminho e o componente.

  • Onde o componente é carregado? Os componentes tem que ser carregdos em algum lugar, nao é mesmo? Para isso usamos a tag <router-view/>, e ela está especificamente no App.vue. Neste componente, você verá o menu e logo abaixo a tag que define o local onde os componentes são carregados

  • Como eu "chamo" uma rota/componente? A resposta está no próprio arquivo App.vue, onde você tem a tag router-link com o atributo "to". Ao clicar nesse link, o router pega o caminho especificado, procura em sua lista de rotas, e carrega o componente no router-view.