Gridsome — Framework thế hệ mới dành cho phát triển website
vuejs
9
gridsome
1
Vuevn
1
ssg
2
Male avatar

Vue.vn viết ngày 29/10/2019

alt text

Gridsome là một framework phát triển trang web hiện đại để tạo các trang web tốc độ nhanh và an toàn. Các trang HTML tĩnh được tạo ra để tạo các đánh dấu thân thiện với SEO, hydrat hóa thành một SPA hỗ trợ Vue.js sau khi được tải trong trình duyệt.

Các source plugin lấy dữ liệu nội dung từ các tệp cục bộ hoặc API bên ngoài và lưu trữ dữ liệu trong cơ sở dữ liệu cục bộ. Lớp dữ liệu GraphQL hợp nhất cho phép bạn trích xuất chỉ những dữ liệu bạn cần từ cơ sở dữ liệu và sử dụng nó trong các thành phần Vue.js của bạn. Dữ liệu được tạo và lưu trữ dưới dạng JSON tĩnh khi build ứng dụng.

alt text

Có hai cách để khởi chạy một ứng dụng Web tạo bởi Gridsome:

  • gridsome develop - Khởi động máy chủ trên môi trường phát triển.
  • gridsome build - Tạo các file tĩnh sẵn sàng cho Production (đưa lên hosting).

Gridsome develop

Lệnhgridsome develop khởi động máy chủ trên môi trường phát triển với hot-reloading cập nhật những thay đổi code/file và lớp dữ liệu GraphQL tập trung. Các bạn có thể truy cập vào máy chủ trên môi trường phát triển tại địa chỉ localhost:8080, và khám phá dữ liệu GraphQL tại địa chỉ localhost:8080/___explore.

Đây là những gì diễn ra sau khi chạy lệnh gridsome develop:

  1. Khởi tạo — Đọc cấu hình dự án và khởi chạy các plugin đã cài đặt, v.v.
  2. Tải nguồn dữ liệu — Plugin nguồn lấy dữ liệu và cập nhật vào cơ sở dữ liệu cục bộ.
  3. Tạo GraphQL schema — Tạo GraphQL schema từ các node trong cơ sở dữ liệu.
  4. Tạo code — Tạo mã thời gian chạy như route, plugin, v.v.
  5. Kết thúc khởi động— Khởi động máy chủ phát triển và hiển thị các URL trong bảng điều khiển của bạn.

Gridsome build

Lệnh gridsome build chuẩn bị dự án sẵn sàng cho production. Tức là lệnh này tạo các file HTML đã được tối ưu hóa sẵn sàng đưa lên các dịch vụ Hosting.

Những gì diễn ra khi sử dụng lệnh gridsome build như sau:

  1. Khởi tạo— Đọc các cấu hình của dự án và khởi cài đặt các plugins, etc.
  2. Tải nguồn dữ liệu — Các plugins nguồn (Wordpress, API, hoặc local…) sẽ lấy dữ liệu và cập nhật vào cơ sở dữ liệu cục bộ.
  3. Tạo các GraphQL schema — Tạo các GraphQL schema từ các loại node trong cơ sở dữ liệu cục bộ.
  4. Tạo code — Tạo runtime code chẳng hạn như routes, plugins, etc.
  5. Kết thúc khởi động— Tạo ra các Creates a render queue with all pages and templates.
  6. Chạy GraphQL — Thực hiện tất cả các truy vấn page-query và lưu trữ kết quả vào các filejson.
  7. Biên dịch các assets (css, js) — Chạy webpack để biên dịch các assets sẵn sàng cho production.
  8. Kết xuất file HTML — Kết xuất tất cả các trang và template thành file html tĩnh.
  9. Xử lý các tập tin (files)— Các tệp tin cục bộ được sao chép vào thư mụcdist.
  10. Xử lý các hình ảnh (images) — Hình ảnh cục bộ được xử lý và sao chép vào thư mụcdist.

Bài viết gốc tại Vue.vn

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

Vue.vn

4 bài viết.
28 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
(Ảnh)Static Site Generator (SSG) giống như một phim bộ dài tập. Ngay khi bạn nghĩ rằng mình đã xem hết thì vẫn còn có tập tiếp theo. Và tất cả chún...
Vue.vn viết 26 ngày trước
1 0
Bài viết liên quan
White
9 1
_Có mấy chia sẻ nhỏ, mình muốn đưa ra để mọi người cùng thảo luận góp ý. Thread này không tập trung vào Technical nữa mà discuss về Coding Style & ...
Hùng Phong viết 11 tháng trước
9 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
4 bài viết.
28 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!