Iniciando um projeto com SFC

Introdução

Olá! Se está seguindo o roadmap e eu espero que esteja, deve ter já passado pela seção de leitura da documentação, onde separei alguns links para então chegarmos nessa parte, onde iremos iniciar um projeto usando o modo Single File Component do Vue.js.

 O projeto aqui terá o nome ‘product_card’, mas você pode escolher o nome que preferir. Não se prenda a isso. 

Explicações adicionais

Caso tenha lido a documentação, deve ter percebido que existem 2 modos de trabalhar com o Vue, sendo o primeiro o Single File Component, que é o que iremos trabalhar nessa publicação, onde o Vue.js se encarrega de toda a aplicação.

Já no caso do modo Global do Vue, utilizamos o link cdn da aplicação em um arquivo .html, ou .php e é você quem fica encarregado de algumas responsabilidades do Vue, como por exemplo o roteamento, é de forma geral, um Vue mais cru.

É importante ressaltar que em casos de utilização global do Vue via CDN, de certa forma, isso pode matar completamente o SEO do seu website, já que a renderização será 100% no cliente e os motores de busca podem não indexar corretamente seu conteúdo.

 Mãos na massa

Para iniciarmos, irei considerar que você tem noção de html, css, javascript, npm a um nível médio/avançado, não entrarei em explicações sobre assuntos específicos na maior parte das vezes.

Iniciando a criação da aplicação

Primeiro, vamos abrir o terminal na pasta onde quer que o seu projeto seja criado, nesse terminal então execute o comando de instalação do Vue:

npm create vue@latest

Pode acontecer de o Vue te perguntar se deseja instalar algo, caso pergunte, digite "y" e enter para confirmar.

O instalador Vue então será iniciado e perguntará primeiramente o nome do Projeto, no meu caso,  "product_card".

O instalador irá exibir algumas opções onde você selecionará o que quer  utilizar no projeto, no meu caso, selecionarei:

• Router
• Vitest
• End-to-End
• ESLint
• Prettier

E confirmarei com enter.

Ele perguntará o que quero usar para testes End-to-End, utilizarei "Cypress".

Perguntará se quero utilizar Oxlint, fica a seu critério, ele é experimental no momento. Se estiver começando, pode optar por não instalar, mas sinta-se à vontade para testar.

Feito isso, sua aplicação já está instalada, resta instalar as dependências.

Instalando dependências

Para instalar as dependências acesse a pasta criada pelo Vue através do terminal. Caso não tenha fechado a pasta basta usar o comando:

cd product_card

Após acessar a pasta, rode o comando que realmente instalará as dependências:

npm install

Após instalar as dependências, caso tenha instalado o prettier, é recomendado pelo Vue que você rode:

npm run format

Finalizado, você pode abrir o seu projeto no vscode ou IDE de sua preferência e rodar o comando:

npm run dev

E acessar a sua aplicação no link http://localhost:5173/