Home Blogs NuxtShop:Nuxt和Shopify電子商務入門套件
Applications

NuxtShop:Nuxt和Shopify電子商務入門套件

About The Author

Outline

NuxtShop是一款高度可定製的開源入門套件,用於使用Nuxt 3構建 無頭Shopify商店 。 它開箱即用,具有出色的開發人員體驗和內置性能實踐,作爲生產質量電子商務網站的基礎。

一鍵部署

爲什麼NuxtShop誕生了

NuxtShop誕生於由Covid-19大流行病對電子商務的影響所預示的必然結果。 Forrester和BloomReach發現,2019年電子商務增量銷售額和品牌收入出現了急劇增長,83%的企業數字收入增長了兩位數,而僅增長了9%。

在此期間,世界上最具規模的時尚品牌環球標準將所有零售場所關閉。 Universal Standard成功遷移到了一個由NuxtJS和Shopify構建的無外設架構,儘管開發團隊規模相對較小,預算適中,但線上銷售的收入仍佔100%。

這家服裝公司不僅看到移動轉換率提高了200%,而且隨着遷移,收入達到了前所未有的最高水平,而且團隊速度也得到了提高。

遷移成功後,通用標準技術主管Justin Metros開始創建NuxtShop,這是他希望在通用標準遷移時擁有的入門套件。 NuxtShop是通用標準如何構建遷移並解決無頭商務中的關鍵挑戰的摘要,包括:

  • 用於購物車管理的跨域通信
  • 針對核心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 Framework

Nuxt 3已重新構建,內核較小,經過優化,可提高性能和開發人員體驗。 NuxtShop基於Nuxt的未來與Nuxt 3 (目前處於測試階段)構建

與Pinia的州管理

NuxtShop使用Pinia管理狀態 。 它直觀,安全,可擴展,極輕,設計模塊化, 並具有devtools支援。

使用Tailwind CSS進行CSS樣式

NuxtShop推出了 Tailwind CSS,這是一個高度可定製的實用程序第一的CSS框架,允許直接在標記中進行樣式組合,而無需處理語義類名稱。

Apollo for GraphQL

NuxtShop利用Apollo來管理GraphQL的API。 藉助Apollo [Studio],您不僅可以管理GraphQL API的生命週期,還可以開發,交付和觀察其活動。

通過Layer0託管

缺省情況下,NuxtShop隨Layer0一起提供作爲託管平臺,因爲它提供了許多支援通用標準的功能。 核心Web虛擬化和真實用戶監控,GraphQL暫存,安全(DDoS保護,WAF和爬蟲程序管理)等功能

Shopify for Headless電子商務和作爲結帳系統。

NuxtShop由由API互連的分散式無頭架構提供支援。 它提供了一個 帶有原語和功能的店面API ,如購物車,結帳等,讓您可以開始執行。 藉助無外設方法,您可以交換所需的內容,而不必或輕鬆地將新服務引入堆棧,如付款閘道器,無外設CMS或結帳系統。

Typescript支援

NuxtShop隨附 靜態類型檢查的類型腳本

功能

易於設定/入門

通過Shopify和App安裝程序安裝和執行NuxtShop非常簡單, 或者通過一鍵部署到Layer0 ,同時也將項目選殖到GitHub帳戶。

最小的外部封裝佔用空間

NuxtShop只使用執行所需的軟體包服務,讓您在控制的車輪後面。

最小的初始樣式

NuxtShop不僅是爲了最小的共同分母而打造的,而且它還以最小的樣式提供,讓您像對待新的Nuxt項目一樣控制您的設計。

無頭架構

NuxtShop是爲API驅動而構建的。 開始使用精簡的API佔用空間,並視需要交換和替換服務。

通過Layer0託管

NuxtShop出廠預裝了一鍵部署到Layer0的邊緣平臺,該平臺將邊緣邏輯集成到應用程式代碼中,並將邊緣擴展到瀏覽器。 它通過從核心Web虛擬化和真實用戶監控,GraphQL暫存,邊緣實驗到安全等功能幫助您更快地構建,部署和發貨。

入門

請訪問以下鏈接以開始使用。

捐款

您是否要爲NuxtShop做出貢獻?

  1. 將NuxtShop派生到您的GitHub帳戶並將其選殖到您的本地設備。
  2. 創建一個新的分支`git checkout -b <branch-name>`
  3. 設定 Shopify商店
  4. 在本地選殖中,將`.env.sample`重命名爲`.env`
  5. 將Shopify訪問令牌和*.myshopify URL添加到.env變量
  6. 執行`YARN`以安裝依賴項
  7. 執行`YARN DEV`以在本地開發伺服器上啓動應用程式

打開拉出請求

應針對`m主`分支提出拉拔請求。

問題

發現NuxtShop存在任何問題? 創建新問題