NuxtShop是一款可高度定制的開源入門套件，用於使用Nuxt 3構建無頭Shopify商店。 它開箱即用，具有出色的開發人員體驗和內置性能實踐，作為生產質量電子商務站點的基礎。
NuxtShop誕生的原因
NuxtShop誕生於新型冠狀病毒肺炎(COVID-19) 19大流行病對電子商務的影響所預示的必要性。 Forrester和Bloomreach發現，2019年電子商務的銷售和品牌收入呈飛速增長，當時83％的企業的數字收入增長為兩位數，而僅為9％。
在此期間，世界上規模最大的時尚品牌環球標準將所有零售空間包圍在一起。 Universal Standard成功遷移到使用NuxtJS和Shopify構建的無外設體系結構，儘管開發團隊規模相對較小，預算適中，但100％的收入來自線上銷售。
該服裝公司不僅看到移動轉換率提高了200％，而且在遷移過程中創出了前所未有的最高收入日，而且團隊速度也提高了。
遷移成功後，通用標準技術主管Justin Metros開始創建NuxtShop，這是他希望在通用標準遷移時擁有的入門套件。 NuxtShop是Universal Standard如何構建遷移並解決無外設商務中的關鍵挑戰的精華，包括：
- 用於購物車管理的跨域通信
- 核心Web生理參數的最佳化
- Apollo客戶端和GraphQL API暫存(即將推出)
- 實時CDN數據同步
- 開發人員生產力
- 性能優化
開放原始碼項目為伺服器端渲染(SSR)，暫存，性能優化和部署提供了無縫遷移和成熟的技術，並強調開發人員體驗。
什麼是NuxtShop，什麼不是
NuxtShop是一個開源入門套件，用於在Shopify上使用Vue 3，Nuxt 3，Apollo，Tailwind 3和Pinia開發無頭電子商務。 它允許您使用最新技術(如Nuxt3和Tailwind 3)，對性能較低的電子商務站點依賴性。 如果您已經編寫過任何Nuxt，您就會在家裡使用NuxtShop。
NuxtShop是：
- 輕量級起點
- 可幫助您快速提高工作效率
- 簡約風格，具備基本功能，隨時可擴展
- 有自己的想法，但不是規範性的
- 借助Layer0，Nuxt + Shopify電子商務的起點
- 一個基本電子商務功能項目，其結構鼓勵優秀的開發實踐
- 專為開發人員設計，使用Nuxt進行無外設Shopify電子商務
NuxtShop不是：
- Shopify主題
- 功能齊全的即插即用解決方案/可隨時投入生產的商店
- 設計系統
- 與任何一種工具緊密結合-交換您想要的內容，添加您需要的內容
NuxtShop基於哪些技術構建？
NuxtShop的核心是極簡主義和簡單。 它基於執行所需的技術而構建，不會犧牲或降低質量。 它還具有面向未來的能力，因為它採用創新技術的尖端技術構建而成。
Nuxt 3作為Vue框架
Nuxt 3的架構經過重新設計，內核更小，性能更快，開發人員體驗更佳。 NuxtShop基於Nuxt 3的未來構建(目前處於測試階段)。
與Pinia的國家管理
NuxtShop使用Pinia管理狀態。 它直觀，類型安全，可擴展，極輕，設計模塊化，並支援devtools。
CSS樣式與Tailwind CSS
Tailwind CSS是一種高度可自定義的實用程序優先CSS框架，它允許直接在標記中進行樣式組合，而無需處理語義類名稱。
Apollo for GraphQL
NuxtShop利用Apollo來管理具有GraphQL的API。 通過Apollo [Studio]，您不僅可以管理GraphQL API的生命週期，還可以開發，交付和觀察其活動。
通過Layer0託管
默認情況下，NuxtShop隨附Layer0作爲託管平臺，因爲它提供了許多支持通用標準的功能。 核心Web Vitals和真實用戶監控，GraphQL暫存，安全(DDoS保護，WAF和爬蟲程序管理)等功能
Shopify for Headless eCommerce和結帳系統。
NuxtShop由通過API互連的分散式無外設體系結構提供支援。 它提供了帶有原始功能和功能(如購物車，結帳等)的店面API，讓您立即投入使用。 使用無外設方法，您可以交換所需的內容，而不需要，或者輕鬆地將新服務引入您的堆棧中，例如付款閘道器，無外設CMS或結帳系統。
排版支援
NuxtShop隨附用於靜態類型檢查的打字本。
功能
易於設定/入門
獲取NuxtShop並執行非常簡單，可以通過Shopify和App設定直接安裝和執行，也可以通過單擊部署將項目選殖到GitHub帳戶的方式部署到Layer0。
最小的外部封裝占用空間
NuxtShop僅使用執行所需的必要套件的服務，讓您掌控一切。
最小初始樣式
NuxtShop不僅是最小的公分母，而且造型極簡，讓您像通常使用新鮮Nuxt項目一樣控制您的設計。
無外設體系結構
NuxtShop是以API為導向而打造的。 開始使用精簡的API空間，並根據您的需要交換和替換服務。
通過Layer0託管
NuxtShop出廠時採用了一鍵部署到Layer0的功能，這是一個邊緣平臺，它將邊緣邏輯集成到應用程式代碼中，並將邊緣擴展到瀏攬器。 它有助於您更快地構建，部署和交付，提供從核心Web生命體徵和真實用戶監控，GraphQL暫存，邊緣實驗到安全性的各種功能。
開始使用
請訪問以下鍊接以開始。
- GitHub上的項目
- 如何使用NuxtShop設定Shopify
- 如何設定NuxtShop
- 單擊Layer0上的部署
捐款
是否要向NuxtShop供款？
- 將NuxtShop派生到您的GitHub帳戶，並將其選殖到您的本地設備。
- 創建新分支`git checkout -b branch-name <>`
- 設定Shopify商店
- 在本地選殖中，將`.env.sample`重命名為`.env`
- 將Shopify Access Token和*.myshopify URL添加到.env變量中
- 運行`yarn`安裝依賴項
- 運行`yarn dev`在本地開發服務器上啓動應用程序
打開拉出請求
拉出請求應針對`m主機`分支機構提出。
問題
是否發現NuxtShop有任何問題？ 創建新問題
