Criar e executar um projeto Nuxt.js

O que é Nuxt.js?

Nuxt.js é um framework de código aberto baseado em Vue.js, usado para construir aplicativos Vue.js com renderização no lado do servidor. Ele oferece uma variedade de recursos, como renderização no lado do servidor (SSR), geração de sites estáticos (SSG), divisão automática de código, sistema de rotas robusto, entre outros, permitindo que desenvolvedores criem aplicativos web modernos de forma mais eficiente.

Principais características e vantagens do Nuxt.js

• Renderização no lado do servidor (SSR): Aumenta a velocidade de carregamento da página e o desempenho de SEO.
• Geração de sites estáticos (SSG): Pré-renderiza páginas estáticas, melhorando o desempenho e a experiência do usuário.
• Divisão automática de código: Carrega apenas o código JavaScript necessário para a página atual, otimizando o desempenho.
• Roteamento integrado: Sistema de rotas baseado em arquivos, sem necessidade de configuração adicional.
• Modularidade: Integração fácil de bibliotecas e serviços de terceiros através de módulos.
• Ecossistema robusto: Nuxt.js possui uma vasta gama de plugins e suporte a módulos, facilitando o desenvolvimento.

Usar Nuxt.js pode ajudar desenvolvedores a construir aplicativos web modernos e responsivos de maneira mais eficiente.

Criar e executar um projeto Nuxt.js com ServBay

Neste artigo, usaremos o ambiente Node.js fornecido pelo ServBay para criar e executar um projeto Nuxt.js. Utilizaremos a função "host" do ServBay para configurar o servidor web e acessar o projeto por meio de proxy reverso e serviço de arquivos estáticos.

Criar um projeto Nuxt.js

1. Inicializar o projeto

   Primeiro, certifique-se de ter instalado o ambiente Node.js fornecido pelo ServBay. Em seguida, use o comando abaixo para inicializar um novo projeto Nuxt.js:

   cd /Applications/ServBay/www
   npx create-nuxt-app servbay-nuxt-app

   Siga as instruções para inserir o nome do projeto (recomenda-se o nome servbay-nuxt-app) e escolha outras opções conforme necessário:

   ? Nome do projeto: servbay-nuxt-app
   ? Linguagem de programação: JavaScript
   ? Gerenciador de pacotes: Npm
   ? Framework de UI: None
   ? Módulos Nuxt.js: Axios
   ? Ferramentas de linting: ESLint
   ? Framework de testes: None
   ? Modo de renderização: Universal (SSR / SSG)
   ? Alvo de implantação: Server (Node.js hosting)
   ? Ferramentas de desenvolvimento: jsconfig.json (Recomendado para VS Code)

2. Instalar dependências

   Entre no diretório do projeto e instale as dependências:

   cd servbay-nuxt-app
   npm install

Modificar o conteúdo de saída do projeto Nuxt.js

1. Modificar o arquivo pages/index.vue

   Abra o arquivo pages/index.vue e modifique o conteúdo para exibir "Hello ServBay!":

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style>
   div {
     text-align: center;
     margin-top: 50px;
   }
   </style>

Entrar no modo de desenvolvimento

1. Executar o servidor de desenvolvimento

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

   npm run dev -- --port 8585

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

2. Configurar proxy reverso de host do ServBay

   Use a função "host" do ServBay para acessar o servidor de desenvolvimento via proxy reverso. Nas configurações de "host" do ServBay, adicione um novo proxy reverso:

   • Nome: My first Nuxt.js dev site
   • Domínio: servbay-nuxt-test.dev
   • Tipo de host: Proxy reverso
   • IP: 127.0.0.1
   • Porta: 8585

   Para mais detalhes sobre as configurações, consulte Adicionar um site de desenvolvimento Node.js.

3. Acessar o modo de desenvolvimento

   Abra o navegador e acesse https://servbay-nuxt-test.dev para visualizar o projeto em tempo real. O ServBay suporta domínios personalizados e certificados SSL gratuitos, proporcionando maior segurança.

Construir a versão de produção

1. Construir a versão de produção

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

   npm run build
   npm run export

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

2. Configurar o serviço de arquivos estáticos

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

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

3. Acessar o modo de produção

   Abra o navegador e acesse https://servbay-nuxt-test.prod para visualizar a versão de produção. Os domínios personalizados e certificados SSL gratuitos fornecidos pelo ServBay aumentam a segurança e a credibilidade do seu site.

Seguindo esses passos, você criou e executou com sucesso um projeto Nuxt.js, utilizando as funcionalidades fornecidas pelo ServBay para gerenciar e acessar seu projeto.