Introdução ao Vue CLI

O Vue CLI é uma ferramenta de construção que abstrai a complexidade do Webpack, oferecendo recursos como recarregamento em tempo real (hot-reload) e um servidor de desenvolvimento integrado. Isso permite que os desenvolvedores se concentrem exclusivamente na escrita do código, sem precisar configurar manualmente o ambiente de testes e compilação.

1. Instalação do Ambiente e do CLI

Para começar, é necessário ter o Node.js instalado. O Vue CLI moderno (@vue/cli) já gerencia as dependências do Webpack internamente, mas você pode instalar ferramentas globais adicionais se necessário.

Instale o Vue CLI globalmente através do npm:

npm install -g @vue/cli

Após a conclusão, verifique a versão instalada para garantir que o processo foi bem-sucedido:

vue --version

2. Criação e Estruturação do Projeto

Navegue até o diretório onde deseja armazenar seus projetos e inicie o assistente de criação:

vue create sistema-frontend

O terminal apresentará uma série de prompts para configurar o ecossistema do projeto. Selecione a opção de configuração manual (Manually select features) para personalizar os módulos:

• Project name: O nome do diretório (evite letras maiúsculas para prevenir erros de compatibilidade em sistemas baseados em Unix).
• Features: Selecione Router para gerenciamento de rotas, Linter / Formatter para padronização de código (ESLint), Unit Testing (Jest ou Mocha) e E2E Testing (Cypress).
• Vue version: Escolha entre Vue 2 ou Vue 3 conforme a necessidade da sua aplicação.
• Router history mode: Recomenda-se ativar o modo histórico para URLs mais limpas.
• ESLint config: Selecione ESLint + Prettier para formatação automática.

Após a geração dos arquivos, acesse a pasta do projeto e instale as dependências restantes (caso o CLI não as tenha instalado automaticamente):

cd sistema-frontend
npm install

Se a velocidade de download estiver lenta, considere configurar um registry espelho ou utilizar gerenciadores alternativos como yarn ou pnpm.

A estrutura de diretórios gerada incluirá:

• src/: Código-fonte principle (componentes, rotas, store).
• public/: Ativos estáticos que não passam pelo processo de compilação do Webpack.
• tests/: Scripts para testes unitários e de ponta a ponta (e2e).
• package.json: Manifesto do projeto contendo scripts e dependências.

3. Execução do Servidor de Desenvolvimento

Para iniciar o ambiente local, execute o script de desenvolvimento:

npm run serve

O servidor de desenvolvimento será iniciado, geralmente na porta 8080. Se esta porta estiver em uso, o CLI tentará automaticamente a próxima porta disponível. Para depuração no navegador, é altamente recomendável instalar a extensão oficial Vue.js devtools na sua loja de extensões preferida.

Caso precise alterar o caminho base dos ativos para deploy em subdiretórios ou modificar a porta, crie ou edite o arquivo vue.config.js na raiz do projeto:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/sub-pasta/' : '/',
  devServer: {
    port: 3000
  }
};

4. Análise da Configuração do Webpack

Nas versões modernas do Vue CLI, a configuração do Webpack é abstraída, mas pode ser inspecionada e modificada:

• O arquivo package.json define os pontos de entrada através dos scripts (serve para desenvolvimento, build para produção).
• Para visualizar a configuração completa do Webpack gerada pelo CLI, execute o comando de inspeção:

vue inspect > output.js

Se for necessário sobrescrever ou estender as regras do Webpack (como adicionar loaders personalizados para SASS ou arquivos de mídia), utilize o arquivo vue.config.js com a propriedade configureWebpack ou chainWebpack.

5. Compilação para Produção

Todos os arquivos de origem da aplicação devem residir no diretório src. Quando o desenvolvimento for concluído e a aplicação estiver pronta para o deploy, gere os arquivos otimizados executando:

npm run build

Isso criará uma pasta dist contendo os assets minificados, com hashes nos nomes dos arquivos para controle de cache, prontos para serem servidos por qualquer servidor web estático.