使用 g-link 支援 Smart Link Prefetching
Gridsome 特別提供 <g-link> 支援 Smart Link Prefetching 增進效率，讓相關 Page 在背後事先下載。
タグ : Gridsome
使用 Page 建立 Route
在 Vue 我們會使用獨立的 router/index.js 定義 Route，Gridsome 則另外提供 Page 以實際 Component 定義 Route。
Gridsome 使用 TailwindUI
TailwindUI 基於 TailwindCSS，使用之前須先設定好 TailwindCSS，然後再設定 TailwindUI 的 Plugin。
Gridsome 安裝 Tailwind CSS
Gridsome 基於 Vue，也可以使用 Tailwind CSS，與 Vue CLI 設定上大體類似，只有在 Gridsome Configuration 稍有不同。
使用 WebStorm 開發 Gridsome
Gridsome 一大特色是使用 GraphQL 作為 Data Layer 的統一 Query 語言，透過 WebStorm 的 JS GraphQL Plugin，我們可會獲得更棒的 Gridsome 開發體驗。
使用 Site Meta 讀取 Global Data
使用 GraphQL 讀取 Site Meta 是 Gridsome 一大特色，在 HTML 內直接使用 $static 存取 Static Query，ECMAScript 則要在 Function 內 Destructure this 。
使用 Template 將 Markdown 轉成 HTML
Blog 主要以 Markdown 儲存，透過 Gridsome 獨特的 Template 概念，可將 Markdown 轉成 HTML。
使用 Page 列出所有 Markdown
傳統資料都會放在 SQL 或 NoSQL，但 Blog 卻更適合使用 Markdown 以檔案形式儲存，Gridsome 提供了 Plugin 讓我們以 GraphQL 讀取 Markdown 並顯示 HTML。
如何使 WebStorm 不 Reformat Gridsome 的 GraphQL ?
Gridsome 在 Vue Component 內以 <static-query> 與 <page-query> 使用 GraphQL 讀取 Data 為其一大特色，但目前 WebStorm 尚未全面支援 Gridsome，因此在 Reformat 時，原本 GraphQL 的 Format 會完全跑掉。