Gridsome vs. Nuxt.js: comparação e tutorial com exemplos

Published by WP Info on

Vue.js cresceu em popularidade nos últimos dois anos, com quase 180.000 estrelas no GitHub no momento da escrita. Essa adoção cada vez maior compeliu os desenvolvedores em todo o mundo a construir uma miríade de ferramentas e estruturas em torno do Vue.js, incluindo Nuxt.js e Gridsome.

Neste guia, compararemos Gridsome vs. Nuxt.js, duas estruturas construídas em Vue.js que você pode usar para construir aplicativos JAMstack rápidos. Avaliaremos cada um em termos de experiência do desenvolvedor, uso geral e práticas recomendadas, estrutura e adoção pela comunidade. Para mostrar como o Nuxt.js e o Gridsome funcionam, criaremos um blog de exemplo com os dois frameworks.

Aqui está o que vamos cobrir:

Para acompanhar esta comparação e tutorial Gridsome vs. Nuxt, você deve ter o seguinte:

  • Node >=v8.3 e NPM instalados
  • Gerenciador de pacotes Yarn instalado: npm install-g yarn (Gridsome recomenda usar Yarn)
  • Conhecimento básico de JavaScript
  • Conhecimento básico de Vue.js
  • Gridsome CLI instalado: npm install-g @ gridsome/cli .
  • Conhecimento de GraphQL (não obrigatório)
  • Conhecimento básico da linha de comando

O que é Gridsome?

Gridsome é um gerador de site estático baseado em dados que gera arquivos HTML a partir de arquivos locais, CMSs e APIs externas. Os arquivos HTML são inicialmente carregados no navegador como arquivos estáticos e, em seguida, hidratados em aplicativos Vue.js. Isso melhora o SEO e, ao mesmo tempo, oferece todos os benefícios do Vue. Os dados são pré-buscados e armazenados em uma camada de dados GraphQL.

Esta é uma visão geral da estrutura de diretórios do Gridsome .

O que é Nuxt.js?

Nuxt.js é uma estrutura Vue.js muito poderosa que permite construir aplicativos da web modernos da maneira que você escolher. O Nuxt.js oferece a flexibilidade de criar aplicativos da web como página única, renderização do lado do servidor ou gerados estaticamente.

Verifique a documentação do Nuxt.js para obter uma visão geral da estrutura de diretório Nuxt .

Exemplo de grade: Construindo um aplicativo de blog

Para mostrar como o Gridsome funciona-e estabelecer um quadro de referência para comparar com o Nuxt.js-vamos explorar como construir um blog com o Gridsome.

Para criar um novo projeto Gridsome, execute: 

 gridsome criar meu-gridsome-blog

Abra a pasta recém-criada em seu editor de código e execute gridsome developers para iniciar o servidor de desenvolvimento.

Em seu navegador, abra http://localhost: 8080 e você verá seu incrível-embora inacabado-blog.

Exemplo de blog da Gridsome

Construindo uma IU no Gridsome

O diretório /src é onde você trabalhará com os arquivos .vue . Começando com o diretório /pages , cada arquivo .vue no diretório se torna uma página no navegador, então o conteúdo de About.vue esteja em /about no navegador.

Existem duas maneiras de criar páginas no Gridsome: você pode construir páginas baseadas em arquivo com os arquivos .vue ou você pode usar o API de páginas (mais sobre isso mais tarde).

Cole o snippet de código abaixo dentro do componente em /pages/index.vue para substituir o conteúdo inicial. 

 
 Bem-vindo meu blog incrível



 Eu amo o Vue.js, então escrevo sobre ele. 


 
 Novos artigos

Antes de prosseguirmos, você precisará importar o CSS para o blog globalmente. Crie um arquivo usando esta estrutura de diretório: 

/src/assets/css/main.css

Cole o conteúdo este Gist no principal. arquivo css e importe-o no topo do arquivo main.js , que está na raiz do diretório /src : 

 import'~/assets/css/main.css`

O arquivo main.js é usado para importar estilos e scripts globais. Você também notará que temos acesso à instância do Vue na função exportada, podemos usar isso para instalar o Vue. plug-ins js, registre componentes globais (assim como o componente de layout padrão) e diretivas.

Gerando conteúdo de blog

O Gridsome também tem vários pacotes reutilizáveis ​​chamados plug-ins . Esses plug-ins podem ser usados ​​para implementar algumas funcionalidades personalizadas em seus aplicativos. Existem mais de 180 plug-ins listados atualmente na página de plug-ins do Gridsome.

Usaremos o plugin @ gridsome/source-filesystem para transformar o conteúdo que escrevemos em markdown e carregá-lo em uma camada GraphQL para que possamos consultar nossos componentes.

O plug-in também requer @ gridsome/transformer-note para trabalhar com arquivos markdown.

Para instalar o plugin de origem do sistema de arquivos: 

 yarn add @ gridsome/source-filesystem

Para instalar o transformador: 

 yarn add--dev @ gridsome/transformador-observação

Para configurar o plug-in, modifique o arquivo gridsome.config.js para ficar assim: 

 module.exports={ nome do site:'Gridsome', plugins: [ { use:'@ gridsome/source-filesystem', opções: { typeName:'BlogPost', caminho:'./blog/**/*.md', }, }, ], modelos: { BlogPost:'/blog/: título', },
};

O arquivo gridsome.config.js é onde registramos os plug-ins Gridsome e configuramos o projeto:

  • typeName nas opções do plugin é o nome que damos à coleção GraphQL para nossas postagens de blog e modelo (um preenchimento .vue que criamos momentaneamente em /src/templates )
  • path é onde o plug-in deve procurar por arquivos markdown para gerar conteúdo
  • templates é o objeto que define como devem ser as rotas para arquivos de modelo; : title , neste caso, é o título da postagem do blog, que é dinâmico.

Crie uma pasta blog na raiz do projeto, adicione um arquivo markdown, hello.md e cole o conteúdo abaixo: 

---
título: Hello World
descrição: Este é o primeiro artigo do meu blog incrível
data: 2021-01-14
publicado: verdadeiro
---
# A h1 header
============
Os parágrafos são separados por uma linha em branco.
2o parágrafo. * Itálico *, ** negrito ** e `monoespaço`. Listas detalhadas
parece: * Este * Aquele * o outro
Observe que---sem considerar o asterisco---o texto real
o conteúdo começa em 4 colunas.
> As citações em bloco são
> escrito assim. ## Um cabeçalho h2
------------
Aqui está uma lista numerada: 1. primeiro item 2. segundo item 3. terceiro item `` `js //ciclo para (i=0; i <=4; i ++) { console.log (i) }
`` `

A seguir, crie um arquivo BlogPost.vue em /src/templates . Este arquivo é responsável por renderizar os dados da coleção GraphQL que possui o tipo BlogPost , que é o mesmo nome que definimos no arquivo gridsome.config.js . O valor de typeName em gridsome.config.js deve corresponder ao arquivo criado em /src/templates .

Reinicie seu servidor e abra http://localhost: 8080/___ explore em seu navegador. Você deverá ver um playground GraphQL .

Cole a consulta abaixo na guia esquerda e clique no botão “reproduzir”. 

 query { allBlogPost (filtro: {publicado: {eq: verdadeiro}}) { arestas { nó { caminho, título, data (formato:"DD MMM AAAA"), tempo para ler, contente, } } }
}

A consulta acima busca todos os dados associados ao tipo BlogPost e filtra por aqueles que têm publicado definido como true .

Listando postagens de blog

Agora que temos conteúdo, é hora de exibi-lo.

Atualize o arquivo index.vue em /src/pages com os trechos de código abaixo.

Adicione a consulta abaixo antes da tag

A seguir, cole o código no seguinte snippet abaixo de

no mesmo arquivo: 

 
 
  {{article.title}}   
 
 Publicado em  {{article.date}}  
 
 {{article.description}}

Agora você deve ver seu novo artigo listado.

Exibindo uma postagem

Agora é hora de criar um arquivo .vue em /src/templates .

Crie um arquivo chamado BlogPost.vue em src/templates e cole o conteúdo do snippet abaixo: 

  
  
 {{$ page.post.title}} 
 
 Publicado em  {{$ page.post.date}} ,  {{$ page.post.timeToRead}} min.  leitura 
 
 
  

 
query blogPost ($ path: String!) { post: blogPost (path: $ path) { eu ia título contente data (formato:"D MMMM AAAA") tempo para ler }
}

O Gridsome passa automaticamente o URL deste artigo chamado path para a consulta e que é usado para buscar os dados restantes sobre esta postagem, os dados agora são exibidos na página dentro do