#1 使用 Nuxt 3、Shopify 和 TailwindCSS 建置無頭商務

在本影片中，我們將使用 Nuxt 3、Shopify 和 TailwindCSS 建立一個簡單的 Headless Commerce 網站。 我們將從 Shopify GraphQL API 取得產品，並使用 Nuxt 3 和 TailwindCSS 建立我們的前端。 如果您正在尋找 Shopify 的生產就緒型 Nuxt 應用程序，請查看尤其是與 Shopify 代碼存儲庫的集成： * Nuxt.js 3 文件： * TailwindCSS 文件： * Shopify 文件： * Tailwind Elements 文件： 0:00 簡介0 :16 示範1:23 Vue Storefront 1:38 應用程式中使用的工具2:30 Nuxt 應用程式2:36 安裝TailwindCSS 模組2:56 建置佈局元件（TheHeader 和TheFooter） 3:50 TheHeader 元件5:10 TheFooter 6: 00 自訂佈局6:54 主頁7:20 根app.vue 中的佈局和頁面8:12 Nuxt GraphQL 用戶端安裝和配置10:04 環境變數10:24 產品查詢11:28 在主頁中使用產品查詢12: 45 HomeBanner 元件13:55 ProductCard 元件17:09 ProductList 元件19:01 產品查詢19:47 產品詳細資料頁23:35 ProductDetail 元件30:27 Checkout 突變———— —- ———————————————- —- ——————————- Learning course – 部落格 – Linkedin – Github –