Estruturação Inicial do Projeto

Para iniciar um novo projeto utilizando o ecossistema moderno do Vue, o Vite oferece uma experiência de desenvolvimento extremamente rápida. Abaixo, detalhamos o processo de criação e configuração de uma aplicação Vue 3 com suporte a TypeScript.

1. Geração do Template Base

Utilize o gerenciador de pacotes para criar a estrutura inicial do projeto, selecionando o template oficial que combina Vue e TypeScript:

npm create vite@latest frontend-application -- --template vue-ts

2. Inicialização do Controle de Versão

É fundamental integrar o repositório local ao sistema de controle de versão imediatamente após a criação:

cd frontend-application
git init
git add .
git commit -m "chore: initial project scaffolding"
git branch -M main
git remote add origin <SEU_REPOSITORIO_GIT>
git push -u origin main

3. Instalação das Dependências Essenciais

Adicione as bibliotecas necessárias para o roteamento, gerenciamento de estado, pré-processamento de estilos e tipagem do Node:

# Dependências de desenvolvimento e tipagem
npm install -D @types/node sass unplugin-vue-components

# Dependências de produção
npm install pinia vue-router

Configuração do Bundler e do Compilador

Ajustar o Vite e o TypeScript garante que o projeto reconheça aliases de caminho e processe estilos corretamente.

1. Ajustes no vite.config.ts

Substitua o conteúdo do arquivo de configuração do Vite para incluir resolução de caminhos, proxy de API e importação automática de componentes:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import Components from 'unplugin-vue-components/vite';
import { NutUiResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [NutUiResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/styles/variables" as *;`,
      },
    },
  },
  server: {
    port: 3000,
    proxy: {
      '/v1': {
        target: 'https://backend.example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/v1/, ''),
      },
    },
  },
  build: {
    outDir: 'dist',
    sourcemap: process.env.NODE_ENV !== 'production',
  },
});

2. Mapeamento de Caminhos no tsconfig.json

Para que o editor e o compilador TypeScript entendam o alias @, atualize as opções do compilador:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Padronização de Código e Git Hooks

Para manter a qualidade do código e a consistência das mensagens de commmit, configuraremos ferramentas de linting e ganchos do Git. Certifique-se de que o repositório Git já foi inicializado antes de prosseguir.

1. Instalação das Ferramentas de Qualidade

Adicione o ESLint, Prettier, Husky e Commitlint como dependências de desenvolvimento:

npm install -D eslint prettier husky lint-staged @commitlint/cli @commitlint/config-conventional
npx husky install

2. Configuração do ESLint

Crie ou atualize o arquivo .eslintrc.json na raiz do projeto com as regras de formatação e análise estática:

{
  "root": true,
  "env": {
    "browser": true,
    "node": true,
    "es2022": true
  },
  "extends": [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "prettier"
  ],
  "parserOptions": {
    "ecmaVersion": 2022
  },
  "rules": {
    "vue/no-multiple-template-root": "off",
    "@typescript-eslint/no-explicit-any": "warn"
  }
}

3. Configuração do Commitlint

Crie o arquivo commitlint.config.js para impor o padrão Conventional Commits:

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      ['build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test']
    ]
  }
};

4. Registro dos Hooks do Husky

Configure os ganchos de pre-commit para formatação automática e commit-msg para validação da mensagem:

npx husky add .husky/pre-commit "npx lint-staged"
npx husky add .husky/commit-msg "npx --no -- commitlint --edit $1"

5. Definição do Lint-Staged

Adicione a configuração do lint-staged no seu package.json para garantir que apenas os arquivos modificados sejam verificados antes do commit:

"lint-staged": {
  "*.{js,ts,vue}": [
    "eslint --fix",
    "prettier --write"
  ],
  "*.{css,scss,html,md}": [
    "prettier --write"
  ]
}