Criando e Executando um Projeto Vue.js

O que é Vue.js?

Vue.js é um framework JavaScript progressivo para construção de interfaces de usuário. Diferente de outros grandes frameworks, o Vue adota um design de desenvolvimento incremental de baixo para cima. O núcleo do Vue se concentra apenas na camada de visualização, tornando-o fácil de aprender e fácil de integrar com outras bibliotecas ou projetos existentes. O Vue 3 é a versão mais recente do Vue.js, trazendo muitos novos recursos e melhorias, incluindo melhor performance, tamanho de pacote menor e melhor suporte para TypeScript.

Principais características e vantagens do Vue 3

• API Composicional: Organiza o código lógico através da combinação de funções, tornando o código mais fácil de manter e reutilizar.
• Performance mais rápida: O Vue 3 utiliza objetos Proxy para implementar o sistema reativo, melhorando significativamente o desempenho.
• Tamanho de pacote menor: Com a tecnologia de Tree-shaking, o tamanho do pacote do Vue 3 é menor que o do Vue 2.
• Melhor suporte para TypeScript: O Vue 3 oferece melhores definições de tipo para TypeScript, melhorando a experiência de desenvolvimento.
• Ciclo de vida de componentes aprimorado: Novos hooks de ciclo de vida tornam a lógica do componente mais clara e fácil de gerenciar.

Usar o Vue 3 pode ajudar os desenvolvedores a construir aplicações web modernas e responsivas de forma mais eficiente.

Criando e Executando um Projeto Vue 3 com ServBay

Neste artigo, usaremos o ambiente Node.js fornecido pelo ServBay para criar e executar um projeto Vue 3. Vamos utilizar a funcionalidade "host" do ServBay para configurar o servidor web, com acesso via proxy reverso e serviços de arquivos estáticos.

Criando o Projeto Vue 3

1. Inicializando o Projeto

   Primeiro, certifique-se de que você já instalou o ambiente Node.js fornecido pelo ServBay. Em seguida, utilize o seguinte comando para inicializar um novo projeto Vue 3:

   cd /Applications/ServBay/www
   npm create vue@latest

   Siga as instruções e insira o nome do projeto (recomenda-se servbay-vue-app), e selecione outras opções conforme necessário:

   ✔ Nome do projeto: … servbay-vue-app
   ✔ Adicionar TypeScript? … Não
   ✔ Adicionar suporte a JSX? … Não
   ✔ Adicionar Vue Router para desenvolvimento de Single Page Applications? … Sim
   ✔ Adicionar Pinia para gerenciamento de estado? … Não
   ✔ Adicionar Vitest para testes unitários? … Não
   ✔ Adicionar uma solução para teste de ponta a ponta? … Não
   ✔ Adicionar ESLint para qualidade do código? … Sim
   ✔ Adicionar Prettier para formatação de código? … Sim
   ✔ Adicionar a extensão Vue DevTools 7 para debug? (experimental) … Não

2. Instalando dependências

   Acesse o diretório do projeto e instale as dependências:

   cd servbay-vue-app
   npm install

Modificando o Conteúdo de Saída do Projeto Vue

1. Modificando o arquivo src/App.vue

   Abra o arquivo src/App.vue e modifique o conteúdo para exibir a mensagem "Hello ServBay!":

   <template>
     <div id="app">
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'App'
   }
   </script>
   
   <style>
   #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     text-align: center;
     color: #2c3e50;
     margin-top: 60px;
   }
   </style>

Entrando no Modo de Desenvolvimento

1. Executando o servidor de desenvolvimento

   Inicie o servidor de desenvolvimento e especifique a porta (por exemplo: 8585):

   npm run dev -- --port 8585

   Isso irá iniciar um servidor de desenvolvimento local e expor a porta 8585.

2. Configurando o Proxy Reverso do Host no ServBay

   Utilize a funcionalidade "host" do ServBay para acessar o servidor de desenvolvimento via proxy reverso. Na configuração do "host" do ServBay, adicione um novo proxy reverso:

   • Nome: My first Vue dev site
   • Domínio: servbay-vue-test.dev
   • Tipo de host: Proxy Reverso
   • IP: 127.0.0.1
   • Porta: 8585

   Para detalhes sobre as configurações, consulte Adicionando um site de desenvolvimento Nodejs.

3. Acessando o Modo de Desenvolvimento

   Abra o navegador e acesse https://servbay-vue-test.dev para visualizar o projeto em tempo real. Com a funcionalidade de nomes de domínio personalizados e certificados SSL gratuitos do ServBay, você terá uma segurança adicional.

Construindo a Versão de Produção

1. Construindo a Versão de Produção

   Após finalizar o desenvolvimento, utilize o comando abaixo para construir a versão de produção:

   npm run build

   Após a construção, os arquivos estáticos gerados estarão no diretório dist.

2. Configurando o Serviço de Arquivos Estáticos

   Utilize a funcionalidade "host" do ServBay para acessar a versão de produção via serviço de arquivos estáticos. Nas configurações do "host" do ServBay, adicione um novo site estático:

   • Nome: My first Vue production site
   • Domínio: servbay-vue-test.prod
   • Tipo de host: Estático
   • Diretório raiz do website: /Applications/ServBay/www/servbay-vue-app/dist

3. Acessando o Modo de Produção

   Abra o navegador e acesse https://servbay-vue-test.prod para visualizar a versão de produção construída. Com os domínios personalizados e certificados SSL gratuitos do ServBay, seu site terá maior segurança e confiabilidade.

Seguindo esses passos, você criou e executou com sucesso um projeto Vue 3, e utilizou as funcionalidades fornecidas pelo ServBay para gerenciar e acessar seu projeto.