1 - Introdução 2 - Conhecendo o framework Vue.js 3.8.0 3 - Criando projeto Vue.js 4 - Interpolação de texto 5 - Trabalhando com componentes 6 - Diretiva v-if 7 - Diretiva v-else-if e v-else 8 - Diretiva v-for 9 - Diretiva v-html 10 - Diretiva v-model 11 - Interligações de classes 12 - Evento de clique 13 - Eventos de teclado 14 - Evento de submissão 15 - PreventDefault 16 - Lifecycle 17 - Props estáticos 18 - Props dinâmicos 19 - Rotas 20 - Requisições HTTP 21 - Considerações

3 - Criando projeto no Vue.js

Olá pessoal, na terceira aula do treinamento de Vue.js, iremos criar nosso projeto, veja abaixo como realizar o procedimento:

1º Abra o Prompt de Comando (Windows) ou Terminal (MacOS ou Linux) e selecione um diretório de sua escolha.

2º Utilize o comando: npm create vue@3.8.0, assim será gerado um projeto utilizando a versão 3.8.0, caso queira utilizar a versão mais atual do framework, utilize o comando: npm create vue@latest.

3º Haverá algumas perguntas, com exceção da primeira que é o nome do projeto, as demais iremos selecionar a opção não, as perguntas realizadas serão:

  • Nome do projeto: curso-vue
  • Adicionar TypeScript: Não (TypeScript é um complemento da linguagem JavaScript, neste treinamento não faremos uso)
  • Adicionar suporte a JSX: Não (JSX ou JavaScript XML, é uma estrutura que facilita a junção de tags HTML com estruturas JavaScript, não faremos o uso neste treinamento)
  • Adicionar Vue Router for Single Page: Não, pois iremos criar nosso sistema de rotas posteriormente
  • Utilizar o Pinia para gerenciamento de estado: Não (O Pinia é uma biblioteca para trabalhar com o gerenciamento de estados, não faremos uso neste treinamento)
  • Adicionar testes unitários: Não, nesta primeira etapa do treinamento, não faremos uso de testes unitários
  • Teste de soluções end-to-end: Não, esta é uma ferramenta para realizarmos testes de performance, não faremos uso neste treinamento
  • ESlint: Não, esta ferramenta serve para realizar análises em nosso código, neste momento não faremos uso

Depois de realizar a criação do projeto, abra o Visual Studio Code e selecione a pasta do projeto que foi gerada.

Para executar um projeto em Vue.js é muito simples, basta utilizar o comando: npm run dev, você terá acesso ao projeto em funcionamento através da url: localhost:5173.

Veja abaixo a estrutura de arquivos que compõem um projeto em Vue.js:

  • .vscode: Possui as configurações base do Visual Studio Code (talvez esteja oculta, não há problema, pois não iremos modificar)
  • node_modules: Estrutura de dependências do Node e do Vue
  • public: Local onde o projeto será exportado
  • src: Estrutura de componentes da aplicação
  • .gitignore: Arquivos que não serão enviados para repositórios
  • index.html: Arquivo de inicialização, contendo a estrutura base HTML e referenciando com o arquivo JS que irá chamar os componentes do projeto
  • package-lock.json: Estrutura detalhada de pacotes do Node
  • package.json: Estrutura de pacotes utilizadas pelo Vue, além de informações básicas do projeto, como: nome do projeto e versão
  • README.md: Arquivo contendo as instruções de uso e estrutura do projeto
  • vite.config.js: Configurações do servidor

Abaixo deixarei o vídeo desta aula, nos vemos na próxima ;)