9.1 Configurando o Ambiente Vue CLI

O Vue CLI é uma ferramenta oficial fornecida pela equipe Vue.js para agilizar a criação de projetos. Ele integra funcionalidades essenciais como inicialização de projetos, servidor de desenvolvimento, ferramentas de build e verificação de código, permitindo que desenvolvedores trabalhem de forma mais eficiente.

Site oficial do Vue CLI: https://cli.vuejs.org/pt/

Principais funcionalidades do Vue CLI:

• Inicialização de projetos: Geração rápida de estrutura de projeto Vue com diretórios básicos, arquivos de configuração e dependências.
• Servidor de desenvolvimento: Servidor integrado com suporte a hot-reload para visualização em tempo real das alterações.
• Ferramentas de build: Integração com Webpack para empacotamento e otimização do projeto para produção.
• Verificação de código: Suporte a ESLint e outras ferramentas para manter consistência no estilo de código e reduzir erros.
• Sistema de plugins: Extensibilidade através de plugins para adicionar funcionalidades como roteamento e gerenciamento de estado.

9.1.1 Instalação do npm

O npm é o gerenciador de pacotes do Node.js, utilizado para instalar, compartilhar e gerenciar os pacotes (módulos ou dependências) utilizados em projetos.

Baixe e instale o Node.js a partir do site oficial (https://nodejs.org/pt-br). O processo de instalação é simples - basta seguir as instruções com "Next". Após a instalação, abra seu terminal e digite:

node -v

Se a versão for exibida, a instalação foi bem-sucedida:

$ node -v
v18.17.0

Verifique também o npm:

npm -v

$ npm -v
9.6.7

9.1.2 Instalação Global do Vue CLI

Instale o Vue CLI globalmente em seu sistema:

// Instalação da versão mais recente
npm install -g @vue/cli
// Instalação de uma versão específica
npm install -g @vue/cli@4.5.0

Outros comandos úteis:

// Ver versões disponíveis no repositório
npm view @vue/cli versions --json --depth=0
// Desinstalar versão anterior
npm uninstall vue-cli -g

9.1.3 Criando um Novo Projeto

1. Abrir terminal: Abra seu terminal ou prompt de comando.
2. Criar novo projeto: Utilize o seguinte comando: ``` vue create meu-projeto

   
    Substitua "meu-projeto" pelo nome desejado para seu projeto.
   

3. Selecionar configuração: O Vue CLI solicitará que você escolha um preset ou configure manualmente o projeto.
   • Padrão: Pressione Enter para usar o preset padrão (geralmente inclui Babel e ESLint).
   • Manual: Use as setas para selecionar "Selecionar manualmente as funcionalidades" e configure conforme suas necessidades.
4. Agu instalação: Após a seleção, o Vue CLI baixará automaticamente as dependências necessárias.
5. Entrar no diretório: ``` cd meu-projeto

6. Iniciar servidor: ``` npm run serve

   
    Acesse `http://localhost:8080` em seu navegador para visualizar o projeto.
   
   

9.2 Estrutura de Diretórios e Análise de Execução

Estrutura do Projeto

meu-projeto
├── node_modules       # Pacotes de dependência
├── public             # Recursos estáticos
│   ├── favicon.ico    # Ícone do site
│   └── index.html     # Template principal
├── src                # Código-fonte
│   ├── assets         # Recursos estáticos (imagens, estilos)
│   ├── components     # Componentes reutilizáveis
│   ├── App.vue        # Componente raiz
│   ├── main.js        # Ponto de entrada
│   ├── router         # Configuração de rotas
│   │   └── index.js
│   ├── store          # Gerenciamento de estado Vuex
│   │   └── index.js
│   └── views          # Componentes de página
├── .browserslistrc    # Configuração de navegadores-alvo
├── .eslintrc.js       # Configuração ESLint
├── .gitignore         # Arquivos ignorados pelo Git
├── babel.config.js    # Configuração Babel
├── package.json       # Metadados e dependências
├── README.md          # Documentação do projeto
└── vue.config.js      # Configuração Vue (opcional)

Análise de Execução

1. Iniciailzação: Comando vue create meu-projeto cria a estrutura básica.
2. Instalação de dependências: Comando npm install instala os pacotes necessários.
3. Desenvolvimento: Comando npm run serve inicia o servidor com hot-reload.
4. Build para produção: Comando npm run build gera otimizações para ambiente de produção.
5. Pontos-chave:
   • src/main.js: Ponto de entrada que inicializa a instância Vue.
   • src/App.vue: Componente raiz com saídas de rota e estilos globais.
   • src/router/index.js: Define as regras de navegação da aplicação.
   • src/store/index.js: Gerencia o estado global com Vuex.
   • public e src/assets: Armazenam recursos estáticos.

9.3 Modificando a Porta de Inicialização

Para alterar a porta padrão (8080), edite o arquivo vue.config.js:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 3000  // Porta personalizada
  }
})

9.4 Implementando um Exemplo de Lista de Tarefas

Exemplo prático de uma aplicação de lista de tarefas com Vue CLI.

Funcionalidades:

1. Adicionar novas tarefas através de um campo de entrada.
2. Mover tarefas da lista "a fazer" para "feitas" ao clicar.
3. Excluir tarefas da lista "feitas" ao clicar.

Componente AdicionarTarefa.vue

<template>
  <div class="adicionar-container">
    <input 
      type="text" 
      v-model="novaTarefa" 
      placeholder="Nova tarefa"
      @keyup.enter="adicionarTarefa"
    >
    <button @click="adicionarTarefa">Adicionar</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      novaTarefa: ''
    }
  },
  methods: {
    adicionarTarefa() {
      if(!this.novaTarefa.trim()) {
        this.mostrarAlerta('A tarefa não pode estar vazia')
        return
      }
      this.$emit('tarefa-adicionada', this.novaTarefa)
      this.novaTarefa = ''
    },
    mostrarAlerta(mensagem) {
      const alerta = document.createElement('div')
      alerta.className = 'alerta'
      alerta.textContent = mensagem
      document.body.appendChild(alerta)
      setTimeout(() => alerta.remove(), 2000)
    }
  }
}
</script>

<style scoped>
.adicionar-container {
  margin: 20px 0;
  display: flex;
}

input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

button {
  padding: 8px 16px;
  margin-left: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #3aa876;
}

.alerta {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ff6b6b;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  z-index: 1000;
}
</style>

Componente ListaTarefas.vue

<template>
  <div class="lista-container">
    <ul>
      <li 
        v-for="(tarefa, indice) in tarefas" 
        :key="indice"
        :class="{ 'concluida': tarefa.concluida }"
        @click="alternarStatus(indice)"
      >
        {{ tarefa.texto }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    tarefas: {
      type: Array,
      required: true
    },
    tipoLista: {
      type: String,
      default: 'pendente'
    }
  },
  methods: {
    alternarStatus(indice) {
      if(this.tipoLista === 'pendente') {
        this.$emit('concluir-tarefa', indice)
      } else {
        this.$emit('remover-tarefa', indice)
      }
    }
  }
}
</script>

<style scoped>
.lista-container {
  margin: 20px 0;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 12px;
  margin-bottom: 8px;
  background-color: #f9f9f9;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
}

li:hover {
  background-color: #f0f0f0;
}

li.concluida {
  text-decoration: line-through;
  opacity: 0.7;
}
</style>

Componente ListaDeTarefas.vue

<template>
  <div class="app-container">
    <h1>Lista de Tarefas</h1>
    
    <AdicionarTarefa @tarefa-adicionada="adicionarTarefa" />
    
    <div class="lista-section">
      <h2>Pendentes</h2>
      <ListaTarefas 
        :tarefas="tarefasPendentes" 
        @concluir-tarefa="concluirTarefa"
      />
    </div>
    
    <div class="lista-section">
      <h2>Concluídas</h2>
      <ListaTarefas 
        :tarefas="tarefasConcluidas"
        tipoLista="concluida"
        @remover-tarefa="removerTarefa"
      />
    </div>
  </div>
</template>

<script>
import AdicionarTarefa from './AdicionarTarefa.vue'
import ListaTarefas from './ListaTarefas.vue'

export default {
  components: {
    AdicionarTarefa,
    ListaTarefas
  },
  data() {
    return {
      tarefas: []
    }
  },
  computed: {
    tarefasPendentes() {
      return this.tarefas.filter(tarefa => !tarefa.concluida)
    },
    tarefasConcluidas() {
      return this.tarefas.filter(tarefa => tarefa.concluida)
    }
  },
  methods: {
    adicionarTarefa(texto) {
      this.tarefas.push({
        id: Date.now(),
        texto: texto,
        concluida: false
      })
    },
    concluirTarefa(indice) {
      const tarefa = this.tarefasPendentes[indice]
      if(tarefa) {
        tarefa.concluida = true
      }
    },
    removerTarefa(indice) {
      const indiceReal = this.tarefas.findIndex(tarefa => 
        tarefa.concluida && tarefa.texto === this.tarefasConcluidas[indice].texto
      )
      if(indiceReal !== -1) {
        this.tarefas.splice(indiceReal, 1)
      }
    }
  }
}
</script>

<style>
.app-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 30px;
}

.lista-section {
  margin-bottom: 30px;
}

h2 {
  color: #42b983;
  margin-bottom: 15px;
}
</style>

9.5 Build e Deploy do Projeto Vue CLI

Por que é necessário fazer o build do projeto?

1. Otimização de recursos: O processo de otimiza JavaScript, CSS e imagens, reduzindo significativamente o tamanho dos arquivos.
   • Compressão de código
   • Minificação de variáveis e funções
   • Tree Shaking (remoção de código não utilizado)
2. Consolidação de módulos: Múltiplos arquivos JavaScript são combinados em poucos arquivos, reduzindo o número de requisições HTTP.
3. Cache de recursos: Nomes de arquivos com hashes garantem que os usuários sempre recebam versões atualizadas.
4. Adaptação ao ambiente: Configurações diferentes para desenvolvimento e produção.
5. Pré-processamento: Conversão de TypeScript, Sass/Less para código compatível com navegadores.
6. Code Splitting: Divisão do código em blocos menores para carregamento sob demanda.

Configuração do Build

Adicione as seguintes configurações ao arquivo vue.config.js:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // Caminho base para os assets no build
  publicPath: './',
  // Diretório de saída
  outputDir: 'dist',
  // Diretório para assets estáticos
  assetsDir: 'static'
})

Execute o comando de build no diretório do projeto:

npm run build

O resultado será gerado na pasta dist, pronta para ser implantada em um servidor web.