NuxtShop是一款高度可定制的开源入门套件，用于使用Nuxt 3构建无头Shopify商店。 它开箱即用，具有出色的开发人员体验和内置的性能实践，是生产质量电子商务站点的基础。
为什么NuxtShop诞生
NuxtShop诞生于电子商务上新型冠状病毒肺炎(COVID-19，即2019冠状病毒病)大流行的后果预示的必要性。 正如Forrester和BloomReach所发现的，2019年电子商务增量销售额和品牌收入大幅上升，83%的企业经历了数字收入的两位数增长，而仅为9 %。
在此期间,全球最具尺寸包容性的时尚品牌Universal Standard,关闭了所有零售空间。 Universal Standard成功迁移到使用NuxtJS和Shopify构建的无头架构，尽管开发团队规模相对较小，预算适中，但其在线销售收入仍占100%。
这家服装公司不仅看到移动转化率提升了200%，并在迁移过程中创下了前所未有的最高收入，而且团队速度也有所提高。
迁移成功后，Universal Standard的技术主管Justin Metros决定创建NuxtShop，这是他希望在Universal Standard迁移时拥有的入门套件。 NuxtShop是Universal Standard如何构建迁移架构和解决无外设商务中的关键挑战的提炼，包括：
- 用于购物车管理的跨域通信
- 核心Web生命体征的优化
- 阿波罗客户端和GraphQL API缓存(即将推出)
- 实时CDN数据同步
- 开发人员的工作效率
- 性能优化
开放源代码项目为服务器端呈现(SSR)，缓存，性能优化和部署提供了无缝迁移和成熟的技术，重点是开发人员体验。
什么是NuxtShop，什么不是NuxtShop
NuxtShop是一个开源入门套件，用于在Shopify上开发无头电子商务，Vue 3，Nuxt 3，Apollo，Tailwind 3和Pinia。 它允许您使用Nuxt3和Tailwind 3等最新技术，减少了对高性能电子商务站点的依赖。 如果你已经写了任何Nuxt,你会在家与NuxtShop。
NuxtShop是：
- 轻量级起点
- 配置可帮助您快速提高工作效率
- 简约风格，基本功能随时可扩展
- 有见解，但不具有规范性
- Nuxt + Shopify电子商务的起点在边缘与Layer0
- 一个基本电子商务功能的项目，其结构鼓励出色的开发实践
- 专为采用Nuxt的无头Shopify电子商务开发人员打造
NuxtShop不是：
- Shopify主题
- 功能齐全的即插即用解决方案/生产就绪型商店
- 设计系统
- 紧密连接到任何一个工具-交换您想要的东西,添加您需要的东西
NuxtShop基于哪些技术构建？
NuxtShop的核心是简约和简约。 它建立在运行所需技术的基础之上，不会牺牲或牺牲质量。 它也是面向未来的,因为它是在创新的流行边缘采用最新技术构建的。
Nuxt 3作为Vue框架
Nuxt 3采用更小的内核进行了重新架构，并针对更快的性能和更好的开发人员体验进行了优化。 NuxtShop基于Nuxt的未来Nuxt和Nuxt 3 (目前处于beta版)构建。
国家管理与Pinia
NuxtShop使用Pinia管理状态。 它直观，类型安全，可扩展，极轻，模块化设计，并具有devtools支持。
Tailwind CSS的CSS样式
Tailwind CSS是一个高度可自定义的实用程序优先CSS框架,它允许在您的标记中直接进行样式撰写,而无需处理语义类名称。
Apollo for GraphQL
NuxtShop利用Apollo通过GraphQL管理API。 使用Apollo [Studio]，您不仅能够管理GraphQL API的生命周期，还可以开发，交付和观察其活动。
通过Layer0托管
默认情况下，NuxtShop附带Layer0作为托管平台，因为它提供了支持Universal Standard的许多功能。 核心Web生命周期和真实用户监控，GraphQL缓存，安全(DDoS保护，WAF和爬虫程序管理)等功能
Shopify for Headless eCommerce和作为结帐系统。
NuxtShop由API互连的分散式无外设体系结构提供支持。 它提供了一个StoreFront API，其中包含购物车，结帐等原始内容和功能，让您能够立即投入使用。 借助无外设方法，您可以换出您需要和不需要的服务，或轻松地将新服务引入您的堆栈，如支付网关，无外设CMS或结帐系统。
TypeScript支持
NuxtShop随附用于静态类型检查的TypeScript。
功能
易于设置/入门
通过Shopify和App设置安装和运行NuxtShop ,或者通过一键式部署部署到Layer0 ,也可以将项目克隆到您的GitHub帐户。
最小的外部包装占用空间
NuxtShop仅采用运行所需的必要套件的服务，让您掌控一切。
最小初步样式
NuxtShop不仅是最低的公分母，而且还提供了极小的造型，让您可以像处理Fresh Nuxt项目时一样控制自己的设计。
无外设体系结构
NuxtShop是由API驱动的。 开始使用精益API占用空间，并根据您认为合适的方式交换和替换服务。
通过Layer0托管
NuxtShop出厂时可通过一键式部署到Layer0，这是一个边缘平台，可将边缘逻辑集成到应用程序代码中并将边缘扩展到浏览器。 它可帮助您更快地构建，部署和发货，包括核心Web重要信息和真实用户监控，GraphQL缓存，边缘实验以及安全性等功能。
入门
访问下面的链接开始使用。
- GitHub上的项目
- 如何使用NuxtShop设置Shopify
- 如何设置NuxtShop
- 1单击Deploy on Layer0/Edgio (在Layer0/Edgio上部署)
捐款
你想为NuxtShop贡献力量吗?
- 将NuxtShop复制到您的GitHub帐户并克隆到您的本地设备。
- 创建新的分支`git checkout -b <branch-name>`
- 设置Shopify商店
- 在本地克隆中，将`.env.sample`重命名为`.env`
- 将Shopify访问令牌和*.myshopify URL添加到.env变量
- 运行`yarn`来安装依赖项
- 运行`yarn dev`在本地开发服务器上启动应用程序
打开拉请求
应针对`main`分行提出拉动请求。
问题
是否发现NuxtShop存在任何问题？ 创建新问题
