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