Front-end com Vue 3

Aparência

Configuração do Ambiente de Desenvolvimento ​

A configuração do ambiente de desenvolvimento para trabalhar com Vue.js é uma etapa fundamental para começar a construir aplicações web usando este framework. Aqui estão os passos detalhados para configurar o ambiente, incluindo a instalação do Node.js e do NPM e a criação do primeiro projeto Vue:

1. Instalação do Node.js e NPM ​

Node.js é uma plataforma de execução para JavaScript no lado do servidor, enquanto o NPM (Node Package Manager) é um gerenciador de pacotes que facilita a instalação de bibliotecas e ferramentas para o desenvolvimento JavaScript.

  • Download: Acesse o site oficial de Node.js (nodejs.org) e baixe o instalador para o seu sistema operacional. Geralmente, é recomendado instalar a versão LTS (Long Term Support), pois oferece maior estabilidade e suporte a longo prazo.
  • Instalação: Execute o instalador baixado e siga as instruções. Certifique-se de marcar a opção para instalar o NPM e adicionar o Node.js ao PATH do seu sistema operacional para poder acessar o Node.js e o NPM via linha de comando.
  • Verificação: Para verificar se o Node.js e o NPM foram instalados corretamente, abra o terminal ou prompt de comando e execute:
    bash
    node -v
npm -v
    Estes comandos exibirão as versões instaladas do Node.js e do NPM, respectivamente.

2. Criação do Primeiro Projeto Vue ​

Com o NPM instalado, você pode facilmente criar um novo projeto Vue.

  • Criação do Projeto: No terminal, navegue até o diretório onde deseja criar o projeto e execute:
    bash
    npm create vue@latest nome-do-projeto
    Substitua nome-do-projeto pelo nome que deseja dar ao seu projeto. Este comando instalará e executará a create-vue, a ferramenta de estruturação de projeto de Vue oficial. Nós seremos presenteados com prontos para várias funcionalidades opcionais tais como o suporte da TypeScript e testes:
✔ Project name: … <nome-do-projeto>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No/ Cypress / Nightwatch  / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<nome-do-projeto>...
Done.
  • Navegação até o Projeto: Após a criação, navegue até a pasta do projeto:
    bash
    cd nome-do-projeto
  • Instalação das Dependências: Para instalar as dependências do projeto, execute:
    bash
    npm install
  • Execução do Servidor de Desenvolvimento: Para iniciar o servidor de desenvolvimento e ver o seu projeto no navegador, execute:
    bash
    npm run dev
    Este comando compila o projeto e inicia um servidor web local. O terminal mostrará o URL, geralmente http://localhost:5173/, onde o projeto pode ser acessado.

Seguindo esses passos, você terá um ambiente de desenvolvimento Vue configurado e pronto para começar a desenvolver aplicações web dinâmicas e interativas.