To Do List moderna com Vue.js 3 + TypeScript

Repositório do projeto:

Documentação Vue

Vue.js

Vue.js - The Progressive JavaScript Framework

Vue.js

Extensões do VsCode

Vamos Começar?

Editor de código

Abra seu editor de código! Vamos utilizar o Visual Studio Code, para isso, acesse os aplicativos do computador e abra o programa!

Abrindo nosso terminal

Depois de ter aberto o Visual Studio Code, vamos iniciar nosso terminal para executar alguns comandos e criar nosso projeto Vue!

Para facilitar o acesso, primeiro, abra o gerenciador de arquivos do computador e acesse alguma pasta que você tenha acesso, como por exemplo, o disco chamado Dados ou a pasta do seu usuário.

Na barra superior, clique no caminho e digite o atalho cmd

Com isso, você terá um terminal aberto na pasta indicada.

Comandos para criar o projeto

Execute o comando abaixo para iniciar a criação de um novo projeto Vue

npm create vue@latest

Selecione os 3 itens marcados (com a tecla ESPAÇO)

◆  Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
│  ◼ TypeScript
│  ◻ JSX Support
│  ◻ Router (SPA development)
│  ◻ Pinia (state management)
│  ◻ Vitest (unit testing)
│  ◻ End-to-End Testing
│  ◼ ESLint (error prevention)
│  ◼ Prettier (code formatting)

Não selecione nenhum dos itens

◆  Select experimental features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to
confirm)
│  ◻ Oxlint
│  ◻ rolldown-vite (experimental)

Selecione No

◆  Skip all example code and start with a blank Vue project?
│  ○ Yes / ● No

Por fim, execute cada comando apresentado, um por um

cd semac    # ou o nome do projeto
npm install # para instalar as dependencias
npm run dev # para executar o projeto

Acessando o projeto pelo Visual Studio Code

Depois de termos criado o nosso projeto, vamos acessar a pasta dele seguindo os passos:

Atenção! Abra a pasta criada pelo comando que executamos anteriormente! Ela terá o mesmo nome que você deu quando criou o projeto.

Instalando as extensões recomendadas

Extensões recomendadas do Visual Studio Code

Vá até o menu de extensões (ícone de quebra cabeça) e instale as extensões recomendadas indicadas acima.

Entendendo a sintaxe do Vue

Agora que você já tem o projeto criado e o ambiente configurado, siga as orientações da apresentação para aprender um pouco mais sobre o framework.

XI SEMAC - IFSP - Trilha Vue.js