Bem-vindo! Fico feliz em vê-lo na sétima parte da minha série de resumos da Vuejs Amsterdam Conference 2022, na qual compartilho um resumo de todas as palestras com você. Você pode ler minha série de Resumos da JSWorld Conference 2022 (em quatro partes) , onde resumi todas as palestras do primeiro dia. Você também pode encontrar as palestras anteriores da conferência Vue Amsterdam 2022 em meu blog. aqui (Recorrente) Introdução Depois de dois anos e meio, a JSWorld e a Vue Amsterdam Conference estiveram de volta ao Theatre Amsterdam entre 1 e 3 de junho, e tive a oportunidade de participar desta conferência pela primeira vez. Aprendi muitas coisas, conheci muitas pessoas maravilhosas, conversei com grandes desenvolvedores e me diverti muito. No primeiro dia foi realizado o JSWorld Conference, e no segundo e terceiro dias, o Vue Amsterdam. A conferência estava cheia de informações com grandes oradores, cada um dos quais me ensinou algo valioso. Todos queriam compartilhar seus conhecimentos e informações com outros desenvolvedores. Então pensei que seria ótimo se eu pudesse continuar a compartilhá-lo e ajudar outras pessoas a usá-lo. A princípio, tentei compartilhar algumas anotações ou slides, mas senti que não era bom o suficiente, pelo menos não tão bom quanto o que o palestrante compartilhou comigo. Então decidi rever cada palestra, me aprofundar nelas, pesquisar, fazer anotações e combiná-las com seus slides e até com suas palavras exatas em sua fala e depois compartilhar com vocês para que o que eu compartilho com vocês seja pelo menos no mesmo nível do que aprendi com eles. Um ponto muito importante e eu apenas tentei aprendê-los para poder transformá-los nesses artigos. Mesmo Isso significa que se você aprender algo novo, é por causa de seus esforços. Tudo o que você lê nesses poucos artigos é resultado do esforço e do tempo do próprio palestrante, muitas das frases escritas nesses artigos são exatamente o que eles disseram ou o que escreveram no Slides. Por último, mas não menos importante, posso não me aprofundar em todos os detalhes técnicos ou codificações ao vivo em alguns dos discursos. Mas se você estiver interessado e precisar de mais informações, me avise e tentarei escrever um artigo mais detalhado separadamente. Além disso, não se esqueça de verificar o Twitter/Linkedin deles. você pode encontrar o programa da conferência. Aqui Nuxt Web - Co-Fundador da Nuxt Sebastien Chopin Nossa missão na é fornecer a melhor experiência de desenvolvedor para oferecer a melhor experiência de usuário para seus usuários finais. Estamos fazendo isso com o Nuxt há seis anos. @nuxtlabs Nuxt é um framework web para criar de aplicativo Vue. Isso significa que você pode fazer: qualquer tipo Servier Side Rendering (SSR) Geração de Site Estático (SSG) Renderização do lado do cliente (CSR) Edge Side Rendering (ESR) graças ao Nuxt 3 Desde o início do Nuxt em outubro de 2016, ele foi baixado cerca de 46 milhões de vezes no npm, tem 300 mil sites ao vivo e 18 mil colaboradores do GitHub. Uma comparação entre Nuxt 2 e Nuxt 3 Para o servidor web de desenvolvimento e produção, o Nuxt 2 usa para conectar, que é o núcleo do Express.js, mas para o Nuxt 3 eles criaram o h3 e ele funciona em qualquer tipo de ambiente JavaScript. Servidor Web: Bundler o Webpack 4 é usado no Nuxt 2, e para o Nuxt 3 eles começaram com o Webpack 5, mas após o lançamento do Vite, ele é oficialmente suportado como o Bundler padrão. : Vue 2 no Nuxt 2 e Vue 3 no Nuxt 3 Estrutura de interface do usuário: Vue Router 3 no Nuxt 2 e Vue Router 4 no Nuxt 3, que não serão incluídos se nenhuma diretório for encontrado. Biblioteca de roteamento: pages/ Como o Nuxt faz SSR, é importante poder gerenciar meta tags. Vue Meta é usado no Nuxt 2 e VueUse Head no Nuxt 3. Gerenciamento de meta: Isso é introduzido no Nuxt 3, que compacta o aplicativo nuxt para produção removendo os node_modules para que seu aplicativo Nuxt tenha cerca de 1 megabyte. Servidor (menos) empacotador: Esta é uma comparação de tamanho de pacote hello world entre o Nuxt 2 e o Nuxt 3: Uma das razões pelas quais o Nuxt 3 é muito menor é que ele pode ser alterado em árvore, como o Vue 3. Portanto, se você não usar um recurso, ele não será incluído no pacote. O próximo tamanho de pacote equivalente é de cerca de 80kB. Nesse pacote Nuxt 3 JS, 25,3 kB são do Vue e os 8,7 kB restantes incluem: Entrada de aplicativo com hidratação Componente raiz com <Suspense> Roteador leve e universal: , e useRouter() middleware <NuxtLink> Cabeçalho que pode ser composto e componentes: , , , , … useHead() <Title> <Meta> <Script> Busca universal de dados: $fetch() Páginas de erro padrão: e 404 500 e lógica Plugins runtimeConfig e ganchos: , , , … useNuxtApp() app:created app:mounted page:start Renderização Lateral da Borda Edge Side Rendering - também chamado de contêiner JavaScript por Ryan Dahl - é a capacidade de executar JavaScript nos nós CDN em algum lugar do mundo perto do usuário final. As vantagens: Executa milissegundos de usuários finais 0ms partida a frio Sem servidores para manter Escala automática Preços acessíveis Alguns dos provedores de computação de borda no momento: CloudFlare Trabalhadores Vercel Edge Netlify Edge Deno Deploy Borda Lambda StackPath Conteúdo V2 Nuxt Content é um que lê arquivos Markdown, YAML, CSV e JSON no diretório para criar uma poderosa camada de dados para seu aplicativo e o já está disponível com mais recursos. módulo Nuxt content/ Content V2 Nuxt 2.X O que vem por aí no Nuxt 2.X: Vue 2.7 Ponte Nuxt (beta) vite nitro API de composição e configuração de script TypeScript nuxi CLI Pós-CSS 8 Nuxt 3.0 O que está por vir para o Nuxt 3.0: Nuxt Image Renderização híbrida: Servidor + SWR + Pré-renderização Geração estática completa Modo de pré-visualização Sessões do servidor e autenticação Trabalhadores de serviço (PWA) Auxiliares de SEO e suporte i18n Fim da Oitava Palestra Espero que tenham gostado desta parte e que possa ser tão valiosa para vocês quanto foi para mim. Nos próximos dias, compartilharei o restante das palestras com você. Fique ligado… Publicado também . aqui