Create-Vue

Visão Geral

Create-Vue é a ferramenta oficial recomendada para criação de projetos Vue.js. Ela substitui o antigo Vue CLI, oferencendo uma experiência mais moderna baseada em Vite.

Requisitos Básicos

• Node.js versão 18.0 ou superior
• Gerenciador de pacotes (npm, yarn ou pnpm)

Criando um novo projeto

Comando Básico

npm create vue@latest

Processo de Setup

Durante criação do projeto, você será questionado sobre várias opções:

✔ Project name: … <nome-do-seu-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 / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Estrutura do Projeto Gerado

nome-do-projeto/
├── .vscode/
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ ├── views/ (se Vue Router selecionado)
│ ├── App.vue
│ └── main.js
├── .eslintrc.js (se ESLint selecionado)
├── .prettierrc.js (se Prettier selecionado)
├── index.html
├── package.json
├── README.md
└── vite.config.js

Comandos Importantes

Instalação de Dependências

cd nome-do-projeto
npm install

Desenvolvimento

npm run dev

Build para Produção

npm run build

Configurações Principais

Vite Config

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  // outras configurações
})

Ambiente de Desenvolvimento

• Dev server com Hot Module Replacement (HMR)
• Porta padrão: 5173
• Configurável via vite.config.js

Boas Práticas

1. Organização de Arquivos

• Componentes em src/components
• Páginas/Views em src/views
• Assets em src/assets
• Stores (Pinia) em src/stores

2. Convenções de Nomenclatura

• Componentes: PascalCase (ex: UserProfile.vue)
• Arquivos de composables: camelCase com prefix 'use' (ex: useAuth.js)
• Views: PascalCase com sufixo 'View' (ex: HomeView.vue)

3. Configurações Recomendadas

• ESLint para qualidade de código
• Prettier para formatação
• TypeScript para projetos maiores