Create-Vue

Gabriel Alves — Tue, 14 Jan 2025 01:51:26 +0000

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

DEV Community: Gabriel Alves