Vue Amsterdam 2022: Phần VIII - Web Nuxt

Chào mừng! Rất vui được gặp bạn trong phần thứ bảy của loạt bài tóm tắt về Hội nghị Vuejs Amsterdam 2022 của tôi, trong đó tôi chia sẻ tóm tắt tất cả các cuộc nói chuyện với bạn.

Bạn có thể đọc loạt bài Tóm tắt về Hội nghị JSWorld 2022 của tôi (gồm bốn phần) tại đây , nơi tôi đã tóm tắt tất cả các bài nói chuyện của ngày đầu tiên. Bạn cũng có thể tìm thấy các Bài nói trước của hội nghị Vue Amsterdam 2022 trong blog của tôi.

(Định kỳ) Giới thiệu

Sau hai năm rưỡi, Hội nghị JSWorld và Vue Amsterdam đã trở lại Nhà hát Amsterdam từ ngày 1 đến ngày 3 tháng 6, và tôi đã có cơ hội tham dự hội nghị này lần đầu tiên. Tôi đã học được nhiều điều, gặp nhiều người tuyệt vời, nói chuyện với những nhà phát triển tuyệt vời và đã có một khoảng thời gian tuyệt vời. Vào ngày đầu tiên, Hội nghị JSWorld được tổ chức, và vào ngày thứ hai và thứ ba, Vue Amsterdam.

Hội nghị có đầy đủ thông tin với các diễn giả tuyệt vời, mỗi người trong số họ đã dạy cho tôi điều gì đó có giá trị. Tất cả họ đều muốn chia sẻ kiến thức và thông tin của họ với các nhà phát triển khác. Vì vậy, tôi nghĩ sẽ thật tuyệt nếu tôi có thể tiếp tục chia sẻ nó và giúp những người khác sử dụng nó.

Lúc đầu, tôi cố gắng chia sẻ một vài ghi chú hoặc slide, nhưng tôi cảm thấy nó chưa đủ tốt, ít nhất là không tốt như những gì người nói đã chia sẻ với tôi. Vì vậy, tôi quyết định xem lại từng bài phát biểu, đi sâu hơn vào chúng, tìm kiếm, ghi chú và kết hợp chúng với các trang trình bày và thậm chí là các từ chính xác trong bài phát biểu của họ và sau đó chia sẻ với bạn để những gì tôi chia sẻ với bạn ít nhất là cùng cấp độ với những gì tôi học được từ họ.

Một điểm rất quan trọng

Tất cả những gì bạn đọc được trong vài bài báo này là kết quả của nỗ lực và thời gian của chính người nói, và tôi chỉ cố gắng học hỏi chúng để có thể biến chúng thành những bài báo này. Thậm chí nhiều câu được viết trong những bài báo này chính xác là những gì họ đã nói hoặc những gì họ đã viết trong Trang trình bày. Điều này có nghĩa là nếu bạn học được điều gì đó mới, đó là do nỗ lực của họ.

Cuối cùng nhưng không kém phần quan trọng, tôi có thể không đào sâu vào từng chi tiết kỹ thuật hoặc mã hóa trực tiếp trong một số bài phát biểu. Nhưng nếu bạn quan tâm và cần thêm thông tin, hãy cho tôi biết và tôi sẽ cố gắng viết riêng một bài chi tiết hơn. Ngoài ra, đừng quên kiểm tra Twitter / Linkedin của họ.

Tại đây bạn có thể tìm thấy chương trình của hội nghị.

Web Nuxt

Sebastien Chopin - Đồng sáng lập Nuxt

Sứ mệnh của chúng tôi tại @nuxtlabs là cung cấp Trải nghiệm nhà phát triển tốt nhất để mang lại Trải nghiệm người dùng tốt nhất cho người dùng cuối của bạn. Chúng tôi đang làm điều này với Nuxt trong sáu năm nay.

Nuxt là một khuôn khổ web để tạo bất kỳ loại ứng dụng Vue nào. Điều đó có nghĩa là bạn có thể làm:

• Servier Side Rendering (SSR)
• Tạo trang web tĩnh (SSG)
• Kết xuất phía máy khách (CSR)
• Edge Side Rendering (ESR) nhờ Nuxt 3

Kể từ khi Nuxt bắt đầu vào tháng 10 năm 2016, nó đã được tải xuống khoảng 46 triệu lần trên npm, có 300 nghìn trang web trực tiếp và 18 nghìn cộng tác viên GitHub.

So sánh giữa Nuxt 2 và Nuxt 3

• Máy chủ web: Đối với máy chủ web phát triển và sản xuất, Nuxt 2 sử dụng để kết nối, là cốt lõi của Express.js, nhưng đối với Nuxt 3, họ đã tạo ra h3 và nó hoạt động trong bất kỳ loại môi trường JavaScript nào.

• Bundler: Webpack 4 được sử dụng trong Nuxt 2, và đối với Nuxt 3, họ bắt đầu với Webpack 5, nhưng sau khi phát hành Vite, nó chính thức được hỗ trợ làm Bundler mặc định.

• Khung giao diện người dùng: Vue 2 trong Nuxt 2 và Vue 3 trong Nuxt 3

• Thư viện định tuyến: Vue Router 3 trong Nuxt 2 và Vue Router 4 trong Nuxt 3, sẽ không được bao gồm nếu không tìm thấy pages/ thư mục nào.

• Quản lý meta: Vì Nuxt thực hiện SSR, điều quan trọng là có thể quản lý các thẻ meta. Vue Meta được sử dụng trong Nuxt 2 và VueUse Head trong Nuxt 3.

• Trình đóng gói máy chủ (ít hơn): Tính năng này được giới thiệu trong Nuxt 3, giúp nén ứng dụng nuxt để sản xuất bằng cách loại bỏ node_modules để ứng dụng Nuxt của bạn sẽ có dung lượng khoảng 1 megabyte.

Đây là so sánh kích thước gói hello world giữa Nuxt 2 và Nuxt 3:

Một trong những lý do khiến Nuxt 3 nhỏ hơn nhiều là nó có thể shak được, giống như Vue 3. Vì vậy, nếu bạn không sử dụng một tính năng, nó sẽ không được bao gồm trong gói.

Kích thước gói tương đương Tiếp theo là khoảng 80kB.

Trong gói Nuxt 3 JS đó, 25,3kB là từ Vue và 8,7kB còn lại bao gồm:

• Mục nhập ứng dụng với hydrat hóa
• Thành phần gốc với <Suspense>
• Bộ định tuyến phổ biến và nhẹ: useRouter() , middleware và <NuxtLink>
• Head composable & các thành phần: useHead() , <Title> , <Meta> Metosystem, <Script> ,…
• Tìm nạp dữ liệu chung: $fetch()
• Các trang lỗi mặc định: 404 và 500
• Plugins và runtimeConfig
• useNuxtApp() có thể tổng hợp và hooks: app:created , app:mounted , page:start ,…

Kết xuất cạnh bên

Edge Side Rendering - còn được Ryan Dahl đặt tên là vùng chứa JavaScript - là khả năng chạy JavaScript tại các nút CDN ở đâu đó trên thế giới gần với người dùng cuối.

Những lợi thế:

• Chạy mili giây từ người dùng cuối
• 0ms bắt đầu lạnh
• Không có máy chủ để duy trì
• Chia tỷ lệ tự động
• Giá cả phải chăng

Một số nhà cung cấp dịch vụ điện toán Edge ngay bây giờ:

• Nhân viên CloudFlare
• Vercel Edge
• Netlify Edge
• Triển khai Deno
• Lambda Edge
• StackPath

Nội dung V2

Nuxt Content là một mô-đun Nuxt đọc các tệp Markdown, YAML, CSV và JSON trong content/ thư mục để tạo một lớp dữ liệu mạnh mẽ cho ứng dụng của bạn và Content V2 hiện đã ra mắt với nhiều tính năng hơn.

Nuxt 2.X

Những gì sắp tới cho Nuxt 2.X:

• Vue 2.7
• Cầu Nuxt (beta)
  • Vite
  • Nitro
  • Thiết lập API và tập lệnh thành phần
  • TypeScript
  • nuxi CLI
  • PostCSS 8

Nuxt 3.0

Những gì sắp tới cho Nuxt 3.0:

• Hình ảnh Nuxt
• Kết xuất kết hợp: Máy chủ + SWR + Kết xuất trước
• Toàn bộ thế hệ tĩnh
• Chế độ xem trước
• Phiên máy chủ và xác thực
• Nhân viên dịch vụ (PWA)
• Người trợ giúp SEO và hỗ trợ i18n

Kết thúc buổi nói chuyện thứ tám

Tôi hy vọng bạn thích phần này và nó có thể có giá trị đối với bạn cũng như đối với tôi. Trong vài ngày tới, tôi sẽ chia sẻ phần còn lại của cuộc nói chuyện với bạn. Giữ nguyên…

Cũng được xuất bản ở đây .